<!DOCTYPE html>
<html lang="en">

<head>
    <title>Datta Able - Most Complete Bootstrap Admin Template</title>
    <!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 10]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
    <meta name="keywords" content="admin templates, bootstrap admin templates, bootstrap 4, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, datta able, datta able bootstrap admin template">
    <meta name="author" content="Codedthemes" />

    <!-- Favicon icon -->
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    <!-- fontawesome icon -->
    <link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">

    <!-- ======================= -->
    <!-- ======= PLUGIN CSS ===== -->
    <!-- ======================= -->

    <!-- animation css -->
    <link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
    <!-- prism css -->
   <link rel="stylesheet" href="assets/plugins/prism/css/prism.min.css">
    <!-- morris css -->
    <link rel="stylesheet" href="assets/plugins/chart-morris/css/morris.css">
    <!-- nvd3 css -->
    <link rel="stylesheet" href="assets/plugins/chart-nvd3/css/nv.d3.min.css">
    <!-- vendor css -->
    <link rel="stylesheet" href="assets/css/style.css">

    <style>pre[class*=language-]:after, pre[class*=language-]:before{
            display: none;
        }
        .docs-page-header {
        	font-weight: 400;
        	font-size: 27px;
        	margin: 0;
        	padding: 15px 50px;
        	line-height:40px;
        	height: 70px;
        }
        .docs-page-header.bg-dark {
            background-color: rgb(63, 77, 103) !important;
        }

        .docs-header-path {
        	opacity: 1;
        }
        .docs-wrapper {
        	min-height: calc(100vh - 70px);
        	position: relative;
        }

        .docs-inner {
        	padding: 40px;
        }

        .docs-sections {
        	position: fixed;
        	top: 70px;
        	left: 0;
        	bottom: 0;
        	overflow: hidden;
        }

        .docs-sections-inner {
        	padding-top: 32px;
        	padding-left: 32px;
        	padding-right:32px;
        	margin: 0;
        }

        .docs-sections-inner>li:first-child {
        	padding-top: 0 !important;
        }

        .docs-sections-inner li {
        	list-style: none;
        	padding: 5px 0;
        	margin: 0;
        	font-size:14px;
        }

        .docs-sections,
        .docs-sections a,
        .docs-sections a:focus,
        .docs-sections a:active {
        	color: #6c757d;
        	line-height: 1.3;
            padding: 0;
        }

        .docs-sections a:hover {
        	color: #333;
            position:relative;
        }

        .docs-sections a.active {
        	color: #333;
        	font-weight: bold;
            position:relative;
        }
        .docs-sections a.active:before , .docs-sections a:hover:before {
            content: "";
            position: absolute;
            width: 5px;
            height: 5px;
            background: #000;
            border-radius: 50%;
            top: 8px;
            left: -15px;
        }

        .docs-page-header,
        .docs-wrapper {
        	min-width: 1200px;
        }

        .docs-sections {
        	width: 230px;
            background: rgba(63, 77, 103, 0.05);
        }

        .docs-wrapper {
        	padding-left: 230px;
        }

        h2.docs-header {
        	margin-bottom:32px;
        	font-size: 24px;
        	position: relative;
        }

        h2.docs-header~h2.docs-header {
        	margin-top: 50px;
        }
    </style>


    <!-- ======================= -->
    <!-- ======= PLUGIN JS ===== -->
    <!-- ======================= -->

    <script src="assets/js/vendor-all.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>

    <!-- highlight.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script src="assets/plugins/clipboard/js/clipboard.js"></script>
    <!-- prism Js -->
    <script src="assets/plugins/prism/js/prism.min.js"></script>
    <!-- Am 4 js -->
    <script src="assets/plugins/chart-am4/js/core.js"></script>
    <script src="assets/plugins/chart-am4/js/charts.js"></script>
    <script src="assets/plugins/chart-am4/js/animated.js"></script>
    <script src="assets/plugins/chart-am4/js/maps.js"></script>
    <script src="assets/plugins/chart-am4/js/worldLow.js"></script>
    <!-- chartjs js -->
    <script src="assets/plugins/chart-chartjs/js/Chart.min.js"></script>
    <!--echarts chart js -->
    <script src="http://echarts.baidu.com/echarts2/doc/example/timelineOption.js"></script>
    <script src="assets/plugins/chart-echarts/js/echarts-en.min.js"></script>
    <!-- google chart -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <!-- highchart chart -->
    <script src="assets/plugins/chart-highchart/js/highcharts.js"></script>
    <script src="assets/plugins/chart-highchart/js/highcharts-3d.js"></script>
    <!-- chart-knob Js -->
    <script src="assets/plugins/chart-knob/js/jquery.knob.min.js"></script>
    <script src="assets/plugins/chart-knob/js/jquery.knob-custom.min.js"></script>
    <!-- chart-morris Js -->
    <script src="assets/plugins/chart-morris/js/raphael.min.js"></script>
    <script src="assets/plugins/chart-morris/js/morris.min.js"></script>
    <!-- chart-nvd3 Js -->
    <script src="assets/plugins/chart-nvd3/js/d3.min.js"></script>
    <script src="assets/plugins/chart-nvd3/js/nv.d3.min.js"></script>
    <script src="assets/plugins/chart-nvd3/js/stream_layers.js"></script>
    <!-- peity chart js -->
    <script src="assets/plugins/chart-peity/js/jquery.peity.min.js"></script>


</head>

<body>
    <h2 class="docs-page-header bg-dark text-white">
        <span class="docs-header-path">charts</span>
    </h2>
    <div class="docs-wrapper">
        <div class="docs-sections">
            <ul class="docs-sections-inner">
                <li class="nav-item"><a class="nav-link active" href="#page-amchart">Am chart</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-chartjs">Chart Js</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-echart">Echart</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-google">Google Chart</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-highchart">High Chart</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-knob">Knob Chart</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-morris">Morris Chart</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-nvd3">NVD3 Chart</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-peity">Peity Chart</a></li>
                <li class="nav-item"><a class="nav-link" href="#page-radial">Radial Chart</a></li>
            </ul>
        </div>
        <div class="docs-inner">
            <h2 class="docs-header" id="page-amchart">Am chart</h2>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Amchart 4</h5>
                        </div>
                        <div class="card-block">
                            <div class="row">
                                <div class="col-md-12 datta-example mb-5">
                                    <h5>Pie [ With Legend ] Chart</h5>
                                    <hr>
                                    <div id="am-pie-2" style="height: 400px"></div>
                                    <script type="text/javascript">
                                        $(document).ready(function() {
                                            var chart = am4core.create("am-pie-2", am4charts.PieChart);
                                            chart.data = [{
                                                "country": "Lithuania",
                                                "litres": 201.9
                                            }, {
                                                "country": "Czech Republic",
                                                "litres": 251.9
                                            }, {
                                                "country": "Ireland",
                                                "litres": 201.1
                                            }, {
                                                "country": "Germany",
                                                "litres": 165.8
                                            }, {
                                                "country": "Australia",
                                                "litres": 139.9
                                            }, {
                                                "country": "Austria",
                                                "litres": 128.3
                                            }, {
                                                "country": "UK",
                                                "litres": 99
                                            }, {
                                                "country": "Belgium",
                                                "litres": 60
                                            }, {
                                                "country": "The Netherlands",
                                                "litres": 50
                                            }];
                                            var pieSeries = chart.series.push(new am4charts.PieSeries());
                                            pieSeries.dataFields.value = "litres";
                                            pieSeries.dataFields.category = "country";
                                            pieSeries.slices.template.stroke = am4core.color("#fff");
                                            pieSeries.slices.template.strokeWidth = 2;
                                            pieSeries.slices.template.strokeOpacity = 1;
                                            chart.legend = new am4charts.Legend();
                                        });
                                    </script>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 datta-example mb-5">
                                    <h5>XY [ Stacked 1 ] Chart</h5>
                                    <hr>
                                    <div id="am-xy-1" style="height: 400px"></div>
                                    <script type="text/javascript">
                                        $(document).ready(function() {
                                            // Apply chart themes
                                            am4core.useTheme(am4themes_animated);

                                            // Create chart instance
                                            var chart = am4core.create("am-xy-1", am4charts.XYChart);

                                            // Add data
                                            chart.data = [{
                                                "country": "Lithuania",
                                                "research": 501.9,
                                                "marketing": 250,
                                                "sales": 199
                                            }, {
                                                "country": "Czech Republic",
                                                "research": 301.9,
                                                "marketing": 222,
                                                "sales": 251
                                            }, {
                                                "country": "Ireland",
                                                "research": 201.1,
                                                "marketing": 170,
                                                "sales": 199
                                            }, {
                                                "country": "Germany",
                                                "research": 165.8,
                                                "marketing": 122,
                                                "sales": 90
                                            }, {
                                                "country": "Australia",
                                                "research": 139.9,
                                                "marketing": 99,
                                                "sales": 252
                                            }, {
                                                "country": "Austria",
                                                "research": 128.3,
                                                "marketing": 85,
                                                "sales": 84
                                            }, {
                                                "country": "UK",
                                                "research": 99,
                                                "marketing": 93,
                                                "sales": 142
                                            }, {
                                                "country": "Belgium",
                                                "research": 60,
                                                "marketing": 50,
                                                "sales": 55
                                            }, {
                                                "country": "The Netherlands",
                                                "research": 50,
                                                "marketing": 42,
                                                "sales": 25
                                            }];

                                            // Create axes
                                            var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
                                            categoryAxis.dataFields.category = "country";
                                            categoryAxis.title.text = "Local country offices";
                                            categoryAxis.renderer.grid.template.location = 0;
                                            categoryAxis.renderer.minGridDistance = 20;

                                            var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                                            valueAxis.title.text = "Expenditure (M)";

                                            // Create series
                                            var series = chart.series.push(new am4charts.ColumnSeries());
                                            series.dataFields.valueY = "research";
                                            series.dataFields.categoryX = "country";
                                            series.name = "Research";
                                            series.tooltipText = "{name}: [bold]{valueY}[/]";
                                            series.stacked = true;

                                            var series2 = chart.series.push(new am4charts.ColumnSeries());
                                            series2.dataFields.valueY = "marketing";
                                            series2.dataFields.categoryX = "country";
                                            series2.name = "Marketing";
                                            series2.tooltipText = "{name}: [bold]{valueY}[/]";
                                            series2.stacked = true;

                                            var series3 = chart.series.push(new am4charts.ColumnSeries());
                                            series3.dataFields.valueY = "sales";
                                            series3.dataFields.categoryX = "country";
                                            series3.name = "Sales";
                                            series3.tooltipText = "{name}: [bold]{valueY}[/]";

                                            // Add cursor
                                            chart.cursor = new am4charts.XYCursor();
                                        });
                                    </script>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 datta-example mb-5">
                                    <h5>Map [ Heat-Map ] Chart</h5>
                                    <hr>
                                    <div id="am-map-4" style="height: 400px"></div>
                                    <script type="text/javascript">
                                        $(document).ready(function() {
                                            // Create map instance
                                            var chart = am4core.create("am-map-4", am4maps.MapChart);

                                            // Set map definition
                                            chart.geodata = am4geodata_worldLow;

                                            // Set projection
                                            chart.projection = new am4maps.projections.Miller();

                                            // Create map polygon series
                                            var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

                                            // Make map load polygon (like country names) data from GeoJSON
                                            polygonSeries.useGeodata = true;

                                            // Configure series
                                            var polygonTemplate = polygonSeries.mapPolygons.template;
                                            polygonTemplate.tooltipText = "{name}";
                                            polygonTemplate.fill = am4core.color("#999");

                                            // Create hover state and set alternative fill color
                                            var hs = polygonTemplate.states.create("hover");
                                            hs.properties.fill = am4core.color("#899FD4");

                                            // Remove Antarctica
                                            polygonSeries.exclude = ["AQ"];

                                            // Add heat rule
                                            polygonSeries.heatRules.push({
                                                "property": "fill",
                                                "target": polygonSeries.mapPolygons.template,
                                                "min": am4core.color("#ffffff"),
                                                "max": am4core.color("#A389D4")
                                            });

                                            // Add heat legend
                                            var heatLegend = chart.createChild(am4maps.HeatLegend);
                                            heatLegend.series = polygonSeries;
                                            heatLegend.width = am4core.percent(100);

                                            polygonSeries.mapPolygons.template.events.on("over", function(ev) {
                                                if (!isNaN(ev.target.dataItem.value)) {
                                                    heatLegend.valueAxis.showTooltipAt(ev.target.dataItem.value)
                                                } else {
                                                    heatLegend.valueAxis.hideTooltip();
                                                }
                                            });

                                            polygonSeries.mapPolygons.template.events.on("out", function(ev) {
                                                heatLegend.valueAxis.hideTooltip();
                                            });

                                            // Add expectancy data
                                            polygonSeries.data = [{
                                                id: "AF",
                                                value: 60.524
                                            }, {
                                                id: "AL",
                                                value: 77.185
                                            }, {
                                                id: "DZ",
                                                value: 70.874
                                            }, {
                                                id: "AO",
                                                value: 51.498
                                            }, {
                                                id: "AR",
                                                value: 76.128
                                            }, {
                                                id: "AM",
                                                value: 74.469
                                            }, {
                                                id: "AU",
                                                value: 82.364
                                            }, {
                                                id: "AT",
                                                value: 80.965
                                            }, {
                                                id: "AZ",
                                                value: 70.686
                                            }, {
                                                id: "BH",
                                                value: 76.474
                                            }, {
                                                id: "BD",
                                                value: 70.258
                                            }, {
                                                id: "BY",
                                                value: 69.829
                                            }, {
                                                id: "BE",
                                                value: 80.373
                                            }, {
                                                id: "BJ",
                                                value: 59.165
                                            }, {
                                                id: "BT",
                                                value: 67.888
                                            }, {
                                                id: "BO",
                                                value: 66.969
                                            }, {
                                                id: "BA",
                                                value: 76.211
                                            }, {
                                                id: "BW",
                                                value: 47.152
                                            }, {
                                                id: "BR",
                                                value: 73.667
                                            }, {
                                                id: "BN",
                                                value: 78.35
                                            }, {
                                                id: "BG",
                                                value: 73.448
                                            }, {
                                                id: "BF",
                                                value: 55.932
                                            }, {
                                                id: "BI",
                                                value: 53.637
                                            }, {
                                                id: "KH",
                                                value: 71.577
                                            }, {
                                                id: "CM",
                                                value: 54.61
                                            }, {
                                                id: "CA",
                                                value: 81.323
                                            }, {
                                                id: "CV",
                                                value: 74.771
                                            }, {
                                                id: "CF",
                                                value: 49.517
                                            }, {
                                                id: "TD",
                                                value: 50.724
                                            }, {
                                                id: "CL",
                                                value: 79.691
                                            }, {
                                                id: "CN",
                                                value: 75.178
                                            }, {
                                                id: "CO",
                                                value: 73.835
                                            }, {
                                                id: "KM",
                                                value: 60.661
                                            }, {
                                                id: "CD",
                                                value: 49.643
                                            }, {
                                                id: "CG",
                                                value: 58.32
                                            }, {
                                                id: "CR",
                                                value: 79.712
                                            }, {
                                                id: "CI",
                                                value: 50.367
                                            }, {
                                                id: "HR",
                                                value: 76.881
                                            }, {
                                                id: "CU",
                                                value: 79.088
                                            }, {
                                                id: "CY",
                                                value: 79.674
                                            }, {
                                                id: "CZ",
                                                value: 77.552
                                            }, {
                                                id: "DK",
                                                value: 79.251
                                            }, {
                                                id: "GL",
                                                value: 79.251
                                            }, {
                                                id: "DJ",
                                                value: 61.319
                                            }, {
                                                id: "DO",
                                                value: 73.181
                                            }, {
                                                id: "EC",
                                                value: 76.195
                                            }, {
                                                id: "EG",
                                                value: 70.933
                                            }, {
                                                id: "SV",
                                                value: 72.361
                                            }, {
                                                id: "GQ",
                                                value: 52.562
                                            }, {
                                                id: "ER",
                                                value: 62.329
                                            }, {
                                                id: "EE",
                                                value: 74.335
                                            }, {
                                                id: "ET",
                                                value: 62.983
                                            }, {
                                                id: "FJ",
                                                value: 69.626
                                            }, {
                                                id: "FI",
                                                value: 80.362
                                            }, {
                                                id: "FR",
                                                value: 81.663
                                            }, {
                                                id: "GA",
                                                value: 63.115
                                            }, {
                                                id: "GF",
                                                value: 79.9
                                            }, {
                                                id: "GM",
                                                value: 58.59
                                            }, {
                                                id: "GE",
                                                value: 74.162
                                            }, {
                                                id: "DE",
                                                value: 80.578
                                            }, {
                                                id: "GH",
                                                value: 60.979
                                            }, {
                                                id: "GR",
                                                value: 80.593
                                            }, {
                                                id: "GT",
                                                value: 71.77
                                            }, {
                                                id: "GN",
                                                value: 55.865
                                            }, {
                                                id: "GW",
                                                value: 54.054
                                            }, {
                                                id: "GY",
                                                value: 66.134
                                            }, {
                                                id: "HT",
                                                value: 62.746
                                            }, {
                                                id: "HN",
                                                value: 73.503
                                            }, {
                                                id: "HK",
                                                value: 83.199
                                            }, {
                                                id: "HU",
                                                value: 74.491
                                            }, {
                                                id: "IS",
                                                value: 81.96
                                            }, {
                                                id: "IN",
                                                value: 66.168
                                            }, {
                                                id: "ID",
                                                value: 70.624
                                            }, {
                                                id: "IR",
                                                value: 73.736
                                            }, {
                                                id: "IQ",
                                                value: 69.181
                                            }, {
                                                id: "IE",
                                                value: 80.531
                                            }, {
                                                id: "IL",
                                                value: 81.641
                                            }, {
                                                id: "IT",
                                                value: 82.235
                                            }, {
                                                id: "JM",
                                                value: 73.338
                                            }, {
                                                id: "JP",
                                                value: 83.418
                                            }, {
                                                id: "JO",
                                                value: 73.7
                                            }, {
                                                id: "KZ",
                                                value: 66.394
                                            }, {
                                                id: "KE",
                                                value: 61.115
                                            }, {
                                                id: "KP",
                                                value: 69.701
                                            }, {
                                                id: "KR",
                                                value: 81.294
                                            }, {
                                                id: "KW",
                                                value: 74.186
                                            }, {
                                                id: "KG",
                                                value: 67.37
                                            }, {
                                                id: "LA",
                                                value: 67.865
                                            }, {
                                                id: "LV",
                                                value: 72.045
                                            }, {
                                                id: "LB",
                                                value: 79.716
                                            }, {
                                                id: "LS",
                                                value: 48.947
                                            }, {
                                                id: "LR",
                                                value: 60.23
                                            }, {
                                                id: "LY",
                                                value: 75.13
                                            }, {
                                                id: "LT",
                                                value: 71.942
                                            }, {
                                                id: "LU",
                                                value: 80.371
                                            }, {
                                                id: "MK",
                                                value: 75.041
                                            }, {
                                                id: "MG",
                                                value: 64.28
                                            }, {
                                                id: "MW",
                                                value: 54.798
                                            }, {
                                                id: "MY",
                                                value: 74.836
                                            }, {
                                                id: "ML",
                                                value: 54.622
                                            }, {
                                                id: "MR",
                                                value: 61.39
                                            }, {
                                                id: "MU",
                                                value: 73.453
                                            }, {
                                                id: "MX",
                                                value: 77.281
                                            }, {
                                                id: "MD",
                                                value: 68.779
                                            }, {
                                                id: "MN",
                                                value: 67.286
                                            }, {
                                                id: "ME",
                                                value: 74.715
                                            }, {
                                                id: "MA",
                                                value: 70.714
                                            }, {
                                                id: "EH",
                                                value: 70.714
                                            }, {
                                                id: "MZ",
                                                value: 49.91
                                            }, {
                                                id: "MM",
                                                value: 65.009
                                            }, {
                                                id: "NA",
                                                value: 64.014
                                            }, {
                                                id: "NP",
                                                value: 67.989
                                            }, {
                                                id: "NL",
                                                value: 80.906
                                            }, {
                                                id: "NZ",
                                                value: 80.982
                                            }, {
                                                id: "NI",
                                                value: 74.515
                                            }, {
                                                id: "NE",
                                                value: 57.934
                                            }, {
                                                id: "NG",
                                                value: 52.116
                                            }, {
                                                id: "NO",
                                                value: 81.367
                                            }, {
                                                id: "SJ",
                                                value: 81.367
                                            }, {
                                                id: "OM",
                                                value: 76.287
                                            }, {
                                                id: "PK",
                                                value: 66.42
                                            }, {
                                                id: "PA",
                                                value: 77.342
                                            }, {
                                                id: "PG",
                                                value: 62.288
                                            }, {
                                                id: "PY",
                                                value: 72.181
                                            }, {
                                                id: "PE",
                                                value: 74.525
                                            }, {
                                                id: "PH",
                                                value: 68.538
                                            }, {
                                                id: "PL",
                                                value: 76.239
                                            }, {
                                                id: "PT",
                                                value: 79.732
                                            }, {
                                                id: "QA",
                                                value: 78.231
                                            }, {
                                                id: "RO",
                                                value: 73.718
                                            }, {
                                                id: "RU",
                                                value: 67.874
                                            }, {
                                                id: "RW",
                                                value: 63.563
                                            }, {
                                                id: "SA",
                                                value: 75.264
                                            }, {
                                                id: "SN",
                                                value: 63.3
                                            }, {
                                                id: "RS",
                                                value: 73.934
                                            }, {
                                                id: "SL",
                                                value: 45.338
                                            }, {
                                                id: "SG",
                                                value: 82.155
                                            }, {
                                                id: "SK",
                                                value: 75.272
                                            }, {
                                                id: "SI",
                                                value: 79.444
                                            }, {
                                                id: "SB",
                                                value: 67.465
                                            }, {
                                                id: "SO",
                                                value: 54
                                            }, {
                                                id: "ZA",
                                                value: 56.271
                                            }, {
                                                id: "SS",
                                                value: 54.666
                                            }, {
                                                id: "ES",
                                                value: 81.958
                                            }, {
                                                id: "LK",
                                                value: 74.116
                                            }, {
                                                id: "SD",
                                                value: 61.875
                                            }, {
                                                id: "SR",
                                                value: 70.794
                                            }, {
                                                id: "SZ",
                                                value: 48.91
                                            }, {
                                                id: "SE",
                                                value: 81.69
                                            }, {
                                                id: "CH",
                                                value: 82.471
                                            }, {
                                                id: "SY",
                                                value: 71
                                            }, {
                                                id: "TW",
                                                value: 79.45
                                            }, {
                                                id: "TJ",
                                                value: 67.118
                                            }, {
                                                id: "TZ",
                                                value: 60.885
                                            }, {
                                                id: "TH",
                                                value: 74.225
                                            }, {
                                                id: "TL",
                                                value: 67.033
                                            }, {
                                                id: "TG",
                                                value: 56.198
                                            }, {
                                                id: "TT",
                                                value: 69.761
                                            }, {
                                                id: "TN",
                                                value: 75.632
                                            }, {
                                                id: "TR",
                                                value: 74.938
                                            }, {
                                                id: "TM",
                                                value: 65.299
                                            }, {
                                                id: "UG",
                                                value: 58.668
                                            }, {
                                                id: "UA",
                                                value: 68.414
                                            }, {
                                                id: "AE",
                                                value: 76.671
                                            }, {
                                                id: "GB",
                                                value: 80.396
                                            }, {
                                                id: "US",
                                                value: 78.797
                                            }, {
                                                id: "UY",
                                                value: 77.084
                                            }, {
                                                id: "UZ",
                                                value: 68.117
                                            }, {
                                                id: "VE",
                                                value: 74.477
                                            }, {
                                                id: "PS",
                                                value: 73.018
                                            }, {
                                                id: "VN",
                                                value: 75.793
                                            }, {
                                                id: "YE",
                                                value: 62.923
                                            }, {
                                                id: "ZM",
                                                value: 57.037
                                            }, {
                                                id: "ZW",
                                                value: 58.142
                                            }];
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Am 4 Js --&gt;
                    &lt;script src="assets/plugins/chart-am4/js/core.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/chart-am4/js/charts.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/chart-am4/js/animated.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/chart-am4/js/maps.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/chart-am4/js/worldLow.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-chartjs">Chart Js</h2>
            <div class="row">
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-bar-1" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-bar-1").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(0, 300, 0, 0);
                            theme_g1.addColorStop(0, '#1de9b6');
                            theme_g1.addColorStop(1, '#1dc4e9');
                            var theme_g2 = bar.createLinearGradient(0, 300, 0, 0);
                            theme_g2.addColorStop(0, '#899FD4');
                            theme_g2.addColorStop(1, '#A389D4');
                            var data1 = {
                                labels: [0, 1, 2, 3],
                                datasets: [{
                                    label: "Data 1",
                                    data: [25, 45, 74, 85],
                                    borderColor: theme_g1,
                                    backgroundColor: theme_g1,
                                    hoverborderColor: theme_g1,
                                    hoverBackgroundColor: theme_g1,
                                }, {
                                    label: "Data 2",
                                    data: [30, 52, 65, 65],
                                    borderColor: theme_g2,
                                    backgroundColor: theme_g2,
                                    hoverborderColor: theme_g2,
                                    hoverBackgroundColor: theme_g2,
                                }]
                            };
                            var myBarChart = new Chart(bar, {
                                type: 'bar',
                                data: data1,
                                options: {
                                    barValueSpacing: 20
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar [ Stacked ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-bar-2" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-bar-2").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(0, 300, 0, 0);
                            theme_g1.addColorStop(0, '#1de9b6');
                            theme_g1.addColorStop(1, '#1dc4e9');
                            var theme_g2 = bar.createLinearGradient(0, 300, 0, 0);
                            theme_g2.addColorStop(0, '#899FD4');
                            theme_g2.addColorStop(1, '#A389D4');
                            var data1 = {
                                labels: [0, 1, 2, 3],
                                datasets: [{
                                    label: "Data 1",
                                    data: [25, 45, 74, 85],
                                    borderColor: theme_g1,
                                    backgroundColor: theme_g1,
                                    hoverborderColor: theme_g1,
                                    hoverBackgroundColor: theme_g1,
                                }, {
                                    label: "Data 2",
                                    data: [30, 52, 65, 65],
                                    borderColor: theme_g2,
                                    backgroundColor: theme_g2,
                                    hoverborderColor: theme_g2,
                                    hoverBackgroundColor: theme_g2,
                                }]
                            };
                            var myBarChart = new Chart(bar, {
                                type: 'bar',
                                data: data1,
                                options: {
                                    barValueSpacing: 20,
                                    scales: {
                                        xAxes: [{
                                            stacked: true,
                                        }],
                                        yAxes: [{
                                            stacked: true
                                        }]
                                    }
                                },
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar [ Horizontal ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-bar-3" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-bar-3").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(0, 300, 0, 0);
                            theme_g1.addColorStop(0, '#1de9b6');
                            theme_g1.addColorStop(1, '#1dc4e9');
                            var theme_g2 = bar.createLinearGradient(0, 300, 0, 0);
                            theme_g2.addColorStop(0, '#899FD4');
                            theme_g2.addColorStop(1, '#A389D4');
                            var data1 = {
                                labels: [0, 1, 2, 3],
                                datasets: [{
                                    label: "Data 1",
                                    data: [25, 45, 74, 85],
                                    borderColor: theme_g1,
                                    backgroundColor: theme_g1,
                                    hoverborderColor: theme_g1,
                                    hoverBackgroundColor: theme_g1,
                                }, {
                                    label: "Data 2",
                                    data: [30, 52, 65, 65],
                                    borderColor: theme_g2,
                                    backgroundColor: theme_g2,
                                    hoverborderColor: theme_g2,
                                    hoverBackgroundColor: theme_g2,
                                }]
                            };
                            var myBarChart = new Chart(bar, {
                                type: 'horizontalBar',
                                data: data1,
                                options: {
                                    barValueSpacing: 20
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-12 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line [ interpolation mode ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-line-1" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-line-1").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(0, 0, 500, 0);
                            theme_g1.addColorStop(0, 'rgba(29, 233, 182, 0.4)');
                            theme_g1.addColorStop(1, 'rgba(29, 196, 233, 0.5)');
                            var theme_g2 = bar.createLinearGradient(0, 0, 500, 0);
                            theme_g2.addColorStop(0, '#899FD4');
                            theme_g2.addColorStop(1, '#A389D4');
                            var data1 = {
                                labels: [0, 1, 2, 3, 4, 5, 6],
                                datasets: [{
                                    label: "D1",
                                    data: [55, 70, 62, 81, 56, 70, 90],
                                    fill: false,
                                    borderWidth: 4,
                                    lineTension: 0,
                                    borderDash: [15, 10],
                                    borderColor: theme_g2,
                                    backgroundColor: theme_g2,
                                    hoverborderColor: theme_g2,
                                    hoverBackgroundColor: theme_g2,
                                }, {
                                    label: "D2",
                                    data: [85, 55, 70, 50, 75, 45, 60],
                                    fill: true,
                                    cubicInterpolationMode: 'monotone',
                                    borderWidth: 0,
                                    borderColor: theme_g1,
                                    backgroundColor: theme_g1,
                                    hoverborderColor: theme_g1,
                                    hoverBackgroundColor: theme_g1,
                                }, {
                                    label: "D3",
                                    data: [50, 75, 80, 70, 85, 80, 70],
                                    fill: false,
                                    borderWidth: 4,
                                    borderColor: "#04a9f5",
                                    backgroundColor: "#04a9f5",
                                    hoverborderColor: "#04a9f5",
                                    hoverBackgroundColor: "#04a9f5",
                                }]
                            };
                            var myBarChart = new Chart(bar, {
                                type: 'line',
                                data: data1,
                                responsive: true,
                                options: {
                                    barValueSpacing: 20,
                                    maintainAspectRatio: false,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Area [ Fill: 'origin' ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-area-2" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-area-2").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(0, 0, 500, 0);
                            theme_g1.addColorStop(0, 'rgba(29, 233, 182, 0.8)');
                            theme_g1.addColorStop(1, 'rgba(29, 196, 233, 0.8)');
                            var data1 = {
                                labels: [0, 1, 2, 3, 4, 5, 6],
                                datasets: [{
                                    label: "D1",
                                    data: [85, 55, 70, 50, 75, 45, 60],
                                    borderWidth: 1,
                                    borderColor: theme_g1,
                                    backgroundColor: theme_g1,
                                    hoverborderColor: theme_g1,
                                    hoverBackgroundColor: theme_g1,
                                    fill: 'origin',
                                }]
                            };
                            var myBarChart = new Chart(bar, {
                                type: 'line',
                                data: data1,
                                responsive: true,
                                options: {
                                    barValueSpacing: 20,
                                    maintainAspectRatio: false,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Area [ Fill: 'end' ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-area-3" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-area-3").getContext('2d');
                            var theme_g2 = bar.createLinearGradient(0, 0, 500, 0);
                            theme_g2.addColorStop(0, 'rgba(137, 159, 212, 0.8)');
                            theme_g2.addColorStop(1, 'rgba(163, 137, 212, 0.8)');
                            var data1 = {
                                labels: [0, 1, 2, 3, 4, 5, 6],
                                datasets: [{
                                    label: "D1",
                                    data: [85, 55, 70, 50, 75, 45, 60],
                                    borderWidth: 1,
                                    borderColor: theme_g2,
                                    backgroundColor: theme_g2,
                                    hoverborderColor: theme_g2,
                                    hoverBackgroundColor: theme_g2,
                                    fill: 'end',
                                }]
                            };
                            var myBarChart = new Chart(bar, {
                                type: 'line',
                                data: data1,
                                responsive: true,
                                options: {
                                    barValueSpacing: 20,
                                    maintainAspectRatio: false,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Area Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-area-1" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-area-1").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(0, 0, 500, 0);
                            theme_g1.addColorStop(0, 'rgba(29, 233, 182, 0.6)');
                            theme_g1.addColorStop(1, 'rgba(29, 196, 233, 0.6)');
                            var theme_g2 = bar.createLinearGradient(0, 0, 500, 0);
                            theme_g2.addColorStop(0, 'rgba(137, 159, 212, 0.6)');
                            theme_g2.addColorStop(1, 'rgba(163, 137, 212, 0.6)');
                            var data1 = {
                                labels: [0, 1, 2, 3, 4, 5, 6],
                                datasets: [{
                                    label: "D1",
                                    data: [45, 60, 45, 80, 60, 80, 45],
                                    fill: true,
                                    borderWidth: 4,
                                    borderColor: theme_g1,
                                    backgroundColor: theme_g1,
                                    hoverborderColor: theme_g1,
                                    hoverBackgroundColor: theme_g1,
                                }, {
                                    label: "D2",
                                    data: [45, 80, 45, 45, 60, 45, 80],
                                    fill: true,
                                    cubicInterpolationMode: 'monotone',
                                    borderWidth: 0,
                                    borderColor: "rgba(4, 169, 245, 0.6)",
                                    backgroundColor: "rgba(4, 169, 245, 0.6)",
                                    hoverborderColor: "rgba(4, 169, 245, 0.6)",
                                    hoverBackgroundColor: "rgba(4, 169, 245, 0.6)",
                                }, {
                                    label: "D3",
                                    data: [83, 45, 60, 45, 45, 55, 45],
                                    fill: true,
                                    borderWidth: 4,
                                    borderColor: theme_g2,
                                    backgroundColor: theme_g2,
                                    hoverborderColor: theme_g2,
                                    hoverBackgroundColor: theme_g2,
                                }]
                            };
                            var myBarChart = new Chart(bar, {
                                type: 'line',
                                data: data1,
                                responsive: true,
                                options: {
                                    barValueSpacing: 20,
                                    maintainAspectRatio: false,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Radar [ Area ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-radar-1" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-radar-1").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(0, 0, 350, 0);
                            theme_g1.addColorStop(0, 'rgba(29, 233, 182, 0.9)');
                            theme_g1.addColorStop(1, 'rgba(29, 196, 233, 0.9)');
                            var theme_g2 = bar.createLinearGradient(0, 0, 350, 0);
                            theme_g2.addColorStop(0, 'rgba(137, 159, 212, 0.9)');
                            theme_g2.addColorStop(1, 'rgba(163, 137, 212, 0.9)');
                            var data1 = {
                                labels: [0, 1, 2, 3, 4, 5, 6],
                                datasets: [{
                                    label: "D1",
                                    data: [60, 60, 45, 80, 60, 80, 45],
                                    fill: true,
                                    borderWidth: 4,
                                    borderColor: theme_g1,
                                    backgroundColor: theme_g1,
                                    hoverborderColor: theme_g1,
                                    hoverBackgroundColor: theme_g1,
                                }, {
                                    label: "D2",
                                    data: [40, 80, 40, 65, 60, 50, 95],
                                    fill: true,
                                    cubicInterpolationMode: 'monotone',
                                    borderWidth: 0,
                                    borderColor: "rgba(4, 169, 245, 0.9)",
                                    backgroundColor: "rgba(4, 169, 245, 0.9)",
                                    hoverborderColor: "rgba(4, 169, 245, 0.9)",
                                    hoverBackgroundColor: "rgba(4, 169, 245, 0.9)",
                                }, {
                                    label: "D3",
                                    data: [20, 40, 80, 60, 85, 60, 20],
                                    fill: true,
                                    borderWidth: 4,
                                    borderColor: theme_g2,
                                    backgroundColor: theme_g2,
                                    hoverborderColor: theme_g2,
                                    hoverBackgroundColor: theme_g2,
                                }]
                            };
                            var myBarChart = new Chart(bar, {
                                type: 'radar',
                                data: data1,
                                responsive: true,
                                options: {
                                    barValueSpacing: 20,
                                    maintainAspectRatio: false,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Radar [ Area ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-radar-2" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-radar-2").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(0, 0, 350, 0);
                            theme_g1.addColorStop(0, 'rgba(29, 233, 182, 0.4)');
                            theme_g1.addColorStop(1, 'rgba(29, 196, 233, 0.4)');
                            var theme_g2 = bar.createLinearGradient(0, 0, 350, 0);
                            theme_g2.addColorStop(0, 'rgba(137, 159, 212, 0.4)');
                            theme_g2.addColorStop(1, 'rgba(163, 137, 212, 0.4)');
                            var data1 = {
                                labels: [0, 1, 2, 3, 4, 5, 6],
                                datasets: [{
                                    label: "D1",
                                    data: [60, 60, 45, 80, 60, 80, 45],
                                    fill: true,
                                    borderWidth: 4,
                                    borderColor: theme_g1,
                                    backgroundColor: theme_g1,
                                    hoverborderColor: theme_g1,
                                    hoverBackgroundColor: theme_g1,
                                }, {
                                    label: "D2",
                                    data: [40, 80, 40, 65, 60, 50, 95],
                                    fill: true,
                                    cubicInterpolationMode: 'monotone',
                                    borderWidth: 0,
                                    borderColor: "rgba(4, 169, 245, 0.4)",
                                    backgroundColor: "rgba(4, 169, 245, 0.4)",
                                    hoverborderColor: "rgba(4, 169, 245, 0.4)",
                                    hoverBackgroundColor: "rgba(4, 169, 245, 0.4)",
                                }, {
                                    label: "D3",
                                    data: [20, 40, 80, 60, 85, 60, 20],
                                    fill: true,
                                    borderWidth: 4,
                                    borderColor: theme_g2,
                                    backgroundColor: theme_g2,
                                    hoverborderColor: theme_g2,
                                    hoverBackgroundColor: theme_g2,
                                }]
                            };
                            var BarChart = new Chart(bar, {
                                type: 'radar',
                                data: data1,
                                responsive: true,
                                options: {
                                    barValueSpacing: 20,
                                    maintainAspectRatio: false,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Radar [ Area ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-radar-3" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-radar-3").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(0, 0, 350, 0);
                            theme_g1.addColorStop(0, 'rgb(29, 233, 182)');
                            theme_g1.addColorStop(1, 'rgb(29, 196, 233)');
                            var theme_g2 = bar.createLinearGradient(0, 0, 350, 0);
                            theme_g2.addColorStop(0, 'rgb(137, 159, 212)');
                            theme_g2.addColorStop(1, 'rgb(163, 137, 212)');
                            var data1 = {
                                labels: [0, 1, 2, 3, 4, 5, 6],
                                datasets: [{
                                    label: "D1",
                                    data: [60, 60, 45, 80, 60, 80, 45],
                                    fill: true,
                                    borderWidth: 4,
                                    borderColor: theme_g1,
                                    backgroundColor: "transparent",
                                    hoverborderColor: theme_g1,
                                    hoverBackgroundColor: "transparent",
                                }, {
                                    label: "D2",
                                    data: [40, 80, 40, 65, 60, 50, 95],
                                    fill: true,
                                    cubicInterpolationMode: 'monotone',
                                    borderWidth: 0,
                                    borderColor: "rgb(4, 169, 245)",
                                    backgroundColor: "transparent",
                                    hoverborderColor: "rgb(4, 169, 245)",
                                    hoverBackgroundColor: "transparent",
                                }, {
                                    label: "D3",
                                    data: [20, 40, 80, 60, 85, 60, 20],
                                    fill: true,
                                    borderWidth: 4,
                                    borderColor: theme_g2,
                                    backgroundColor: "transparent",
                                    hoverborderColor: theme_g2,
                                    hoverBackgroundColor: "transparent",
                                }]
                            };
                            var BarChart = new Chart(bar, {
                                type: 'radar',
                                data: data1,
                                responsive: true,
                                options: {
                                    barValueSpacing: 20,
                                    maintainAspectRatio: false,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pie Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-pie-1" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-pie-1").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(100, 0, 300, 0);
                            theme_g1.addColorStop(0, 'rgba(29, 233, 182, 0.9)');
                            theme_g1.addColorStop(1, 'rgba(29, 196, 233, 0.9)');
                            var theme_g2 = bar.createLinearGradient(100, 0, 300, 0);
                            theme_g2.addColorStop(0, 'rgba(137, 159, 212, 0.9)');
                            theme_g2.addColorStop(1, 'rgba(163, 137, 212, 0.9)');
                            var data4 = {
                                labels: [
                                    "Data 1",
                                    "Data 2",
                                    "Data 3"
                                ],
                                datasets: [{
                                    data: [30, 30, 40],
                                    backgroundColor: [
                                        theme_g1,
                                        theme_g2,
                                        "#04a9f5"
                                    ],
                                    hoverBackgroundColor: [
                                        theme_g1,
                                        theme_g2,
                                        "#04a9f5"
                                    ]
                                }]
                            };
                            var myPieChart = new Chart(bar, {
                                type: 'pie',
                                data: data4,
                                responsive: true,
                                options: {
                                    maintainAspectRatio: false,
                                }
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Donut Chart</h5>
                        </div>
                        <div class="card-block">
                            <canvas id="chart-donut-1" style="width: 100%; height: 300px"></canvas>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var bar = document.getElementById("chart-donut-1").getContext('2d');
                            var theme_g1 = bar.createLinearGradient(100, 0, 300, 0);
                            theme_g1.addColorStop(0, 'rgba(29, 233, 182, 0.9)');
                            theme_g1.addColorStop(1, 'rgba(29, 196, 233, 0.9)');
                            var theme_g2 = bar.createLinearGradient(100, 0, 300, 0);
                            theme_g2.addColorStop(0, 'rgba(137, 159, 212, 0.9)');
                            theme_g2.addColorStop(1, 'rgba(163, 137, 212, 0.9)');
                            var data4 = {
                                labels: [
                                    "Data 1",
                                    "Data 2",
                                    "Data 3"
                                ],
                                datasets: [{
                                    data: [30, 30, 40],
                                    backgroundColor: [
                                        theme_g1,
                                        theme_g2,
                                        "#04a9f5"
                                    ],
                                    hoverBackgroundColor: [
                                        theme_g1,
                                        theme_g2,
                                        "#04a9f5"
                                    ]
                                }]
                            };
                            var myPieChart = new Chart(bar, {
                                type: 'doughnut',
                                data: data4,
                                responsive: true,
                                options: {
                                    maintainAspectRatio: false,
                                }
                            });
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Chart tags Js --&gt;
                    &lt;script src="assets/plugins/chart-chartjs/js/Chart.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-echart">Echart</h2>
            <div class="row">
                <div class="col-xl-6 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Area Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-echart-line-basic" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                var dom = document.getElementById("chart-echart-line-basic");
                                var myChart = echarts.init(dom);
                                var app = {};
                                var option = null;
                                option = {
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    xAxis: {
                                        type: 'category',
                                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                    },
                                    yAxis: {
                                        type: 'value'
                                    },
                                    color: "#04a9f5",
                                    series: [{
                                        data: [1, 5, 3, 6, 4, 8, 10],
                                        type: 'line',
                                    }]
                                };
                                myChart.setOption(option, true);
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Area Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-echart-line-area" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                var dom = document.getElementById("chart-echart-line-area");
                                var myChart = echarts.init(dom);
                                var app = {};
                                var option = null;
                                option = {
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data: ['abc', 'def', 'pqr']
                                    },
                                    toolbox: {
                                        show: false,
                                        feature: {
                                            mark: {
                                                show: true
                                            },
                                            dataView: {
                                                show: true,
                                                readOnly: false
                                            },
                                            magicType: {
                                                show: true,
                                                type: ['line', 'bar', 'stack', 'tiled']
                                            },
                                            restore: {
                                                show: true
                                            },
                                            saveAsImage: {
                                                show: true
                                            }
                                        }
                                    },
                                    calculable: true,
                                    xAxis: [{
                                        type: 'category',
                                        splitLine: {
                                            show: false
                                        },
                                        boundaryGap: false,
                                        data: ['Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday', 'Sunday']
                                    }],
                                    color: ["rgba(163, 137, 212, 0.5)", "rgba(4, 169, 246, 0.5)", "rgba(28, 233, 181, 0.5)"],
                                    yAxis: [{
                                        type: 'value',
                                        splitLine: {
                                            show: false
                                        }
                                    }],
                                    series: [{
                                        name: 'abc',
                                        type: 'line',
                                        smooth: true,
                                        itemStyle: {
                                            normal: {
                                                areaStyle: {
                                                    type: 'macarons'
                                                }
                                            }
                                        },
                                        data: [10, 12, 21, 54, 260, 830, 710]
                                    }, {
                                        name: 'def',
                                        type: 'line',
                                        smooth: true,
                                        itemStyle: {
                                            normal: {
                                                areaStyle: {
                                                    type: 'macarons'
                                                }
                                            }
                                        },
                                        data: [30, 182, 434, 791, 390, 30, 10]
                                    }, {
                                        name: 'pqr',
                                        type: 'line',
                                        smooth: true,
                                        itemStyle: {
                                            normal: {
                                                areaStyle: {
                                                    type: 'macarons'
                                                }
                                            }
                                        },
                                        data: [1320, 1132, 601, 234, 120, 90, 20]
                                    }]
                                };
                                myChart.setOption(option, true);
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar [ Basic Column ] Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-Bar-besic-column" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                var dom = document.getElementById("chart-Bar-besic-column");
                                var myChart = echarts.init(dom);
                                var app = {};
                                option = null;
                                option = {
                                    title: {
                                        text: 'Bar Chart',
                                        subtext: 'Basic Column Chart'
                                    },
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data: ['Data1', 'Data2']
                                    },
                                    toolbox: {
                                        show: true,
                                        feature: {
                                            mark: {
                                                show: true
                                            },
                                            dataView: {
                                                show: true,
                                                readOnly: false
                                            },
                                            magicType: {
                                                show: true,
                                                type: ['line', 'bar']
                                            },
                                            restore: {
                                                show: true
                                            },
                                            saveAsImage: {
                                                show: true
                                            }
                                        }
                                    },
                                    calculable: true,
                                    color: ["rgba(163, 137, 212, 1)", "rgba(28, 233, 181, 1)"],
                                    xAxis: [{
                                        type: 'category',
                                        boundaryGap: false,
                                        data: ['Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday', 'Sunday']
                                    }],
                                    yAxis: [{
                                        type: 'value',
                                        axisLabel: {
                                            formatter: '{value} °C'
                                        }
                                    }],
                                    series: [{
                                        name: 'Data1',
                                        type: 'line',
                                        smooth: true,
                                        data: [11, 11, 15, 13, 12, 13, 10],
                                        markPoint: {
                                            data: [{
                                                type: 'max',
                                                name: 'Maximum'
                                            }, {
                                                type: 'min',
                                                name: 'Minimum'
                                            }]
                                        },
                                        markLine: {
                                            data: [{
                                                type: 'average',
                                                name: '100'
                                            }]
                                        }
                                    }, {
                                        name: 'Data2',
                                        type: 'line',
                                        smooth: true,
                                        data: [1, -2, 2, 5, 3, 2, 0],
                                        markPoint: {
                                            data: [{
                                                name: 'Week Minimum',
                                                value: -2,
                                                xAxis: 1,
                                                yAxis: -1.5
                                            }]
                                        },
                                        markLine: {
                                            data: [{
                                                type: 'average',
                                                name: '100'
                                            }]
                                        }
                                    }]
                                };
                                myChart.setOption(option, true);
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar [ Basic Bar ] Chart</h5>
                            <div class="card-block  text-center">
                                <div id="chart-Bar-besic-bar" style="width: 100%; height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                var dom = document.getElementById("chart-Bar-besic-bar");
                                var myChart = echarts.init(dom);
                                var app = {};
                                option = null;
                                option = {
                                    title: {
                                        text: 'Bar',
                                        subtext: 'Besic Bar Chart'
                                    },
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data: ['2017', '2018']
                                    },
                                    color: ["rgba(163, 137, 212, 1)", "rgba(28, 233, 181, 1)"],
                                    toolbox: {
                                        show: true,
                                        feature: {
                                            mark: {
                                                show: true
                                            },
                                            dataView: {
                                                show: true,
                                                readOnly: false
                                            },
                                            magicType: {
                                                show: true,
                                                type: ['line', 'bar']
                                            },
                                            restore: {
                                                show: true
                                            },
                                            saveAsImage: {
                                                show: true
                                            }
                                        }
                                    },
                                    calculable: true,
                                    xAxis: [{
                                        type: 'value',
                                        boundaryGap: [0, 0.01]
                                    }],
                                    yAxis: [{
                                        type: 'category',
                                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                    }],
                                    series: [{
                                        name: '2017',
                                        type: 'bar',
                                        data: [18203, 23489, 29034, 104970, 131744, 130230, 29034]
                                    }, {
                                        name: '2018',
                                        type: 'bar',
                                        data: [19325, 23438, 31000, 121594, 134141, 181807, 31000]
                                    }]
                                };
                                myChart.setOption(option, true);
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar [ Timeline ] Chart</h5>
                            <div class="card-block  text-center">
                                <div id="chart-Bar-timeline" style="width: 100%; height: 450px;"></div>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                var dom = document.getElementById("chart-Bar-timeline");
                                var myChart = echarts.init(dom);
                                var app = {};
                                option = null;
                                option = {
                                    timeline: {
                                        data: [
                                            '2002', '2003', '2004', '2005', '2006',
                                            '2007', '2008', '2009', '2010', '2011'
                                        ],
                                        autoPlay: true,
                                        playInterval: 1000
                                    },
                                    options: [{
                                        title: {
                                            'text': 'Timeline',
                                            'subtext': 'Timeline Chart'
                                        },
                                        tooltip: {
                                            'trigger': 'axis'
                                        },
                                        legend: {
                                            x: 'right',
                                            'data': ['GDP', 'DHA', 'HRA', 'PF', 'net sal', 'tot sal'],
                                            'selected': {
                                                'GDP': true,
                                                'DHA': false,
                                                'HRA': true,
                                                'PF': false,
                                                'net sal': false,
                                                'tot sal': false
                                            }
                                        },
                                        color: ['#1de9b6', '#f44236', '#04a9f5', '#f4c22b', '#A389D4', '#3ebfea'],
                                        toolbox: {
                                            'show': true,
                                            orient: 'vertical',
                                            x: 'right',
                                            y: 'center',
                                            'feature': {
                                                'mark': {
                                                    'show': true
                                                },
                                                'dataView': {
                                                    'show': true,
                                                    'readOnly': false
                                                },
                                                'magicType': {
                                                    'show': true,
                                                    'type': ['line', 'bar', 'stack', 'tiled']
                                                },
                                                'restore': {
                                                    'show': true
                                                },
                                                'saveAsImage': {
                                                    'show': true
                                                }
                                            }
                                        },
                                        calculable: true,
                                        grid: {
                                            'y': 80,
                                            'y2': 100
                                        },
                                        xAxis: [{
                                            'type': 'category',
                                            'axisLabel': {
                                                'interval': 0
                                            },
                                            'data': [
                                                'Beijing', '\n Tianjin', 'Hebei', '\n Shanxi', 'Inner Mongolia', '\n Liaoning', 'Jilin', '\n Heilongjiang',
                                                'Shanghai', '\nJiang', 'Zhejiang', '\n Anhui', 'Fujian', '\n Jiangxi', 'Shandong', '\n Henan',
                                                'Hubei', '\n Hunan', 'Guangdong', '\n Guangxi', 'Hainan', '\n Chongqing', 'Sichuan', '\n Guizhou',
                                                'Yunnan', '\n Tibet', 'Shaanxi', '\n Gansu', 'Qinghai', '\n Ningxia', 'Xinjiang'
                                            ]
                                        }],
                                        yAxis: [{
                                            'type': 'value',
                                            'name': 'GDP（Billion）',
                                            'max': 53500
                                        }, {
                                            'type': 'value',
                                            'name': 'other（Billion）'
                                        }],
                                        series: [{
                                            'name': 'GDP',
                                            'type': 'bar',
                                            'markLine': {
                                                symbol: ['arrow', 'none'],
                                                symbolSize: [4, 2],
                                                itemStyle: {
                                                    normal: {
                                                        lineStyle: {
                                                            color: '#f44236'
                                                        },
                                                        barBorderColor: '#f44236',
                                                        label: {
                                                            position: 'left',
                                                            formatter: function(params) {
                                                                return Math.round(params.value);
                                                            },
                                                            textStyle: {
                                                                color: '#f44236'
                                                            }
                                                        }
                                                    }
                                                },
                                                'data': [{
                                                    'type': 'average',
                                                    'name': '100'
                                                }]
                                            },
                                            'data': dataMap.dataGDP['2002']
                                        }, {
                                            'name': 'DHA',
                                            'yAxisIndex': 1,
                                            'type': 'bar',
                                            'data': dataMap.dataFinancial['2002']
                                        }, {
                                            'name': 'HRA',
                                            'yAxisIndex': 1,
                                            'type': 'bar',
                                            'data': dataMap.dataEstate['2002']
                                        }, {
                                            'name': 'PF',
                                            'yAxisIndex': 1,
                                            'type': 'bar',
                                            'data': dataMap.dataPI['2002']
                                        }, {
                                            'name': 'net sal',
                                            'yAxisIndex': 1,
                                            'type': 'bar',
                                            'data': dataMap.dataSI['2002']
                                        }, {
                                            'name': 'tot sal',
                                            'yAxisIndex': 1,
                                            'type': 'bar',
                                            'data': dataMap.dataTI['2002']
                                        }]
                                    }, {
                                        title: {
                                            'text': '2003'
                                        },
                                        series: [{
                                            'data': dataMap.dataGDP['2003']
                                        }, {
                                            'data': dataMap.dataFinancial['2003']
                                        }, {
                                            'data': dataMap.dataEstate['2003']
                                        }, {
                                            'data': dataMap.dataPI['2003']
                                        }, {
                                            'data': dataMap.dataSI['2003']
                                        }, {
                                            'data': dataMap.dataTI['2003']
                                        }]
                                    }, {
                                        title: {
                                            'text': '2004'
                                        },
                                        series: [{
                                            'data': dataMap.dataGDP['2004']
                                        }, {
                                            'data': dataMap.dataFinancial['2004']
                                        }, {
                                            'data': dataMap.dataEstate['2004']
                                        }, {
                                            'data': dataMap.dataPI['2004']
                                        }, {
                                            'data': dataMap.dataSI['2004']
                                        }, {
                                            'data': dataMap.dataTI['2004']
                                        }]
                                    }, {
                                        title: {
                                            'text': '2005'
                                        },
                                        series: [{
                                            'data': dataMap.dataGDP['2005']
                                        }, {
                                            'data': dataMap.dataFinancial['2005']
                                        }, {
                                            'data': dataMap.dataEstate['2005']
                                        }, {
                                            'data': dataMap.dataPI['2005']
                                        }, {
                                            'data': dataMap.dataSI['2005']
                                        }, {
                                            'data': dataMap.dataTI['2005']
                                        }]
                                    }, {
                                        title: {
                                            'text': '2006'
                                        },
                                        series: [{
                                            'data': dataMap.dataGDP['2006']
                                        }, {
                                            'data': dataMap.dataFinancial['2006']
                                        }, {
                                            'data': dataMap.dataEstate['2006']
                                        }, {
                                            'data': dataMap.dataPI['2006']
                                        }, {
                                            'data': dataMap.dataSI['2006']
                                        }, {
                                            'data': dataMap.dataTI['2006']
                                        }]
                                    }, {
                                        title: {
                                            'text': '2007'
                                        },
                                        series: [{
                                            'data': dataMap.dataGDP['2007']
                                        }, {
                                            'data': dataMap.dataFinancial['2007']
                                        }, {
                                            'data': dataMap.dataEstate['2007']
                                        }, {
                                            'data': dataMap.dataPI['2007']
                                        }, {
                                            'data': dataMap.dataSI['2007']
                                        }, {
                                            'data': dataMap.dataTI['2007']
                                        }]
                                    }, {
                                        title: {
                                            'text': '2008'
                                        },
                                        series: [{
                                            'data': dataMap.dataGDP['2008']
                                        }, {
                                            'data': dataMap.dataFinancial['2008']
                                        }, {
                                            'data': dataMap.dataEstate['2008']
                                        }, {
                                            'data': dataMap.dataPI['2008']
                                        }, {
                                            'data': dataMap.dataSI['2008']
                                        }, {
                                            'data': dataMap.dataTI['2008']
                                        }]
                                    }, {
                                        title: {
                                            'text': '2009'
                                        },
                                        series: [{
                                            'data': dataMap.dataGDP['2009']
                                        }, {
                                            'data': dataMap.dataFinancial['2009']
                                        }, {
                                            'data': dataMap.dataEstate['2009']
                                        }, {
                                            'data': dataMap.dataPI['2009']
                                        }, {
                                            'data': dataMap.dataSI['2009']
                                        }, {
                                            'data': dataMap.dataTI['2009']
                                        }]
                                    }, {
                                        title: {
                                            'text': '2010'
                                        },
                                        series: [{
                                            'data': dataMap.dataGDP['2010']
                                        }, {
                                            'data': dataMap.dataFinancial['2010']
                                        }, {
                                            'data': dataMap.dataEstate['2010']
                                        }, {
                                            'data': dataMap.dataPI['2010']
                                        }, {
                                            'data': dataMap.dataSI['2010']
                                        }, {
                                            'data': dataMap.dataTI['2010']
                                        }]
                                    }, {
                                        title: {
                                            'text': '2011'
                                        },
                                        series: [{
                                            'data': dataMap.dataGDP['2011']
                                        }, {
                                            'data': dataMap.dataFinancial['2011']
                                        }, {
                                            'data': dataMap.dataEstate['2011']
                                        }, {
                                            'data': dataMap.dataPI['2011']
                                        }, {
                                            'data': dataMap.dataSI['2011']
                                        }, {
                                            'data': dataMap.dataTI['2011']
                                        }]
                                    }]
                                };
                                myChart.setOption(option, true);
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pie [ Basic Column ] Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-pie-basic" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                var dom = document.getElementById("chart-pie-basic");
                                var myChart = echarts.init(dom);
                                var app = {};
                                option = null;
                                option = {
                                    title: {
                                        text: 'Pie',
                                        subtext: 'Basic Pie Chart',
                                        x: 'center'
                                    },
                                    tooltip: {
                                        trigger: 'item',
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        x: 'left',
                                        data: ['HTML', 'SCSS', 'JS', 'Images', 'Icons']
                                    },
                                    color: ['#f4c22b', '#A389D4', '#3ebfea', '#04a9f5', '#1de9b6'],
                                    toolbox: {
                                        show: true,
                                        feature: {
                                            mark: {
                                                show: true
                                            },
                                            dataView: {
                                                show: true,
                                                readOnly: false
                                            },
                                            magicType: {
                                                show: true,
                                                type: ['pie', 'funnel'],
                                                option: {
                                                    funnel: {
                                                        x: '25%',
                                                        width: '50%',
                                                        funnelAlign: 'left',
                                                        max: 1548
                                                    }
                                                }
                                            },
                                            restore: {
                                                show: true
                                            },
                                            saveAsImage: {
                                                show: true
                                            }
                                        }
                                    },
                                    calculable: true,
                                    series: [{
                                        name: 'Webpage',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: [{
                                            value: 335,
                                            name: 'HTML'
                                        }, {
                                            value: 310,
                                            name: 'SCSS'
                                        }, {
                                            value: 234,
                                            name: 'JS'
                                        }, {
                                            value: 135,
                                            name: 'Images'
                                        }, {
                                            value: 1548,
                                            name: 'Icons'
                                        }]
                                    }]
                                };
                                myChart.setOption(option, true);
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pie [ Doughnut ] Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-pie-doughnut" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                var dom = document.getElementById("chart-pie-doughnut");
                                var myChart = echarts.init(dom);
                                var app = {};
                                option = null;
                                option = {
                                    title: {
                                        text: 'Pie',
                                        subtext: 'Doughnut Chart',
                                        x: 'center'
                                    },
                                    tooltip: {
                                        trigger: 'item',
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        x: 'left',
                                        data: ['HTML', 'SCSS', 'JS', 'Images', 'Icons']
                                    },
                                    color: ['#f4c22b', '#A389D4', '#3ebfea', '#04a9f5', '#1de9b6'],
                                    toolbox: {
                                        show: true,
                                        feature: {
                                            mark: {
                                                show: true
                                            },
                                            dataView: {
                                                show: true,
                                                readOnly: false
                                            },
                                            magicType: {
                                                show: true,
                                                type: ['pie', 'funnel'],
                                                option: {
                                                    funnel: {
                                                        x: '25%',
                                                        width: '50%',
                                                        funnelAlign: 'left',
                                                        max: 1548
                                                    }
                                                }
                                            },
                                            restore: {
                                                show: true
                                            },
                                            saveAsImage: {
                                                show: true
                                            }
                                        }
                                    },
                                    calculable: true,
                                    series: [{
                                        name: 'Webpage',
                                        type: 'pie',
                                        radius: ['50%', '70%'],
                                        itemStyle: {
                                            normal: {
                                                label: {
                                                    show: false
                                                },
                                                labelLine: {
                                                    show: false
                                                }
                                            },
                                            emphasis: {
                                                label: {
                                                    show: true,
                                                    position: 'center',
                                                    textStyle: {
                                                        fontSize: '15',
                                                        fontWeight: 'bold'
                                                    }
                                                }
                                            }
                                        },
                                        data: [{
                                            value: 335,
                                            name: 'HTML'
                                        }, {
                                            value: 310,
                                            name: 'SCSS'
                                        }, {
                                            value: 234,
                                            name: 'JS'
                                        }, {
                                            value: 135,
                                            name: 'Images'
                                        }, {
                                            value: 1548,
                                            name: 'Icons'
                                        }]
                                    }]
                                };
                                myChart.setOption(option, true);
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pie [ Timeline ] Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-pie-timeline" style="width: 100%; height: 450px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                var dom = document.getElementById("chart-pie-timeline");
                                var myChart = echarts.init(dom);
                                var app = {};
                                option = null;
                                var idx = 1;
                                option = {
                                    timeline: {
                                        data: [
                                            '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', {
                                                name: '2013-06-01',
                                                symbol: 'emptyStar6',
                                                symbolSize: 8
                                            },
                                            '2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01', {
                                                name: '2013-12-01',
                                                symbol: 'star6',
                                                symbolSize: 8
                                            }
                                        ],
                                    },
                                    options: [{
                                        title: {
                                            text: 'PieChart',
                                            subtext: 'Pie Timeline Chart'
                                        },
                                        tooltip: {
                                            trigger: 'item',
                                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                                        },
                                        legend: {
                                            data: ['Chrome', 'Firefox', 'Safari', 'IE9+', 'IE8-']
                                        },
                                        color: ['#f4c22b', '#A389D4', '#3ebfea', '#04a9f5', '#1de9b6'],
                                        toolbox: {
                                            show: true,
                                            feature: {
                                                mark: {
                                                    show: true
                                                },
                                                dataView: {
                                                    show: true,
                                                    readOnly: false
                                                },
                                                magicType: {
                                                    show: true,
                                                    type: ['pie', 'funnel'],
                                                    option: {
                                                        funnel: {
                                                            x: '25%',
                                                            width: '50%',
                                                            funnelAlign: 'left',
                                                            max: 1700
                                                        }
                                                    }
                                                },
                                                restore: {
                                                    show: true
                                                },
                                                saveAsImage: {
                                                    show: true
                                                }
                                            }
                                        },
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            center: ['50%', '45%'],
                                            radius: '50%',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }, {
                                        series: [{
                                            name: 'Browser (data is purely fictitious)',
                                            type: 'pie',
                                            data: [{
                                                value: idx * 128 + 80,
                                                name: 'Chrome'
                                            }, {
                                                value: idx * 64 + 160,
                                                name: 'Firefox'
                                            }, {
                                                value: idx * 32 + 320,
                                                name: 'Safari'
                                            }, {
                                                value: idx * 16 + 640,
                                                name: 'IE9+'
                                            }, {
                                                value: idx++ * 8 + 1280,
                                                name: 'IE8-'
                                            }]
                                        }]
                                    }]
                                };
                                myChart.setOption(option, true);
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Gauge Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-Gauge" style="width: 100%; height: 450px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                var dom = document.getElementById("chart-Gauge");
                                var myChart = echarts.init(dom);
                                var app = {};
                                option = null;
                                option = {
                                    tooltip: {
                                        formatter: "{a} <br/>{b} : {c}%"
                                    },
                                    toolbox: {
                                        feature: {
                                            restore: {},
                                            saveAsImage: {}
                                        }
                                    },
                                    series: [{
                                        name: 'gauge Chart',
                                        type: 'gauge',
                                        axisLine: {
                                            show: true,
                                            lineStyle: {
                                                color: [
                                                    [0.2, '#1de9b6'],
                                                    [0.8, '#04a9f5'],
                                                    [1, '#A389D4']
                                                ],
                                                width: 10
                                            }
                                        },
                                        detail: {
                                            formatter: '{value}%'
                                        },
                                        data: [{
                                            value: 50,
                                            name: ''
                                        }]
                                    }]
                                };
                                setInterval(function() {
                                    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                                    myChart.setOption(option, true);
                                }, 2000);;
                                if (option && typeof option === "object") {
                                    myChart.setOption(option, true);
                                }
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Dynamic LineBar Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-DynamicLineBar" style="width: 100%; height: 350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                var domdynamic = document.getElementById("chart-DynamicLineBar");
                                var myChartdynamic = echarts.init(domdynamic);
                                var app = {};
                                var optiondyn = null;
                                optiondyn = {
                                    title: {
                                        text: 'Dynamic',
                                        subtext: 'Bar & Line'
                                    },
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'cross',
                                            label: {
                                                backgroundColor: '#283b56'
                                            }
                                        }
                                    },
                                    legend: {
                                        data: ['Data 1', 'Data 2']
                                    },
                                    color: ['#A389D4', '#1de9b6'],
                                    toolbox: {
                                        show: true,
                                        feature: {
                                            dataView: {
                                                readOnly: false
                                            },
                                            restore: {},
                                            saveAsImage: {}
                                        }
                                    },
                                    dataZoom: {
                                        show: false,
                                        start: 0,
                                        end: 100
                                    },
                                    xAxis: [{
                                        type: 'category',
                                        boundaryGap: true,
                                        data: (function() {
                                            var now = new Date();
                                            var res = [];
                                            var len = 10;
                                            while (len--) {
                                                res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                                                now = new Date(now - 2000);
                                            }
                                            return res;
                                        })()
                                    }, {
                                        type: 'category',
                                        boundaryGap: true,
                                        data: (function() {
                                            var res = [];
                                            var len = 10;
                                            while (len--) {
                                                res.push(10 - len - 1);
                                            }
                                            return res;
                                        })()
                                    }],
                                    yAxis: [{
                                        type: 'value',
                                        scale: true,
                                        name: 'Start',
                                        max: 30,
                                        min: 0,
                                        boundaryGap: [0.2, 0.2]
                                    }, {
                                        type: 'value',
                                        scale: true,
                                        name: 'End',
                                        max: 1200,
                                        min: 0,
                                        boundaryGap: [0.2, 0.2]
                                    }],
                                    series: [{
                                        name: 'Data 2',
                                        type: 'bar',
                                        itemStyle: {
                                            barBorderRadius: [15, 15, 0, 0],
                                        },
                                        xAxisIndex: 1,
                                        yAxisIndex: 1,
                                        data: (function() {
                                            var res = [];
                                            var len = 10;
                                            while (len--) {
                                                res.push(Math.round(Math.random() * 1000));
                                            }
                                            return res;
                                        })()
                                    }, {
                                        name: 'Data 1',
                                        type: 'line',
                                        smooth: true,
                                        data: (function() {
                                            var res = [];
                                            var len = 0;
                                            while (len < 10) {
                                                res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                                                len++;
                                            }
                                            return res;
                                        })()
                                    }]
                                };
                                app.count = 11;
                                setInterval(function() {
                                    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

                                    var data0 = optiondyn.series[0].data;
                                    var data1 = optiondyn.series[1].data;
                                    data0.shift();
                                    data0.push(Math.round(Math.random() * 1000));
                                    data1.shift();
                                    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

                                    optiondyn.xAxis[0].data.shift();
                                    optiondyn.xAxis[0].data.push(axisData);
                                    optiondyn.xAxis[1].data.shift();
                                    optiondyn.xAxis[1].data.push(app.count++);

                                    myChartdynamic.setOption(optiondyn);
                                }, 2100);;
                                if (optiondyn && typeof optiondyn === "object") {
                                    myChartdynamic.setOption(optiondyn, true);
                                }
                            }, 700);
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Echart tags Js --&gt;
                    &lt;script src="http://echarts.baidu.com/echarts2/doc/example/timelineOption.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/chart-echarts/js/echarts-en.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-google">Google Chart</h2>
            <div class="row">
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Area Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-google-area" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                google.charts.load('current', {
                                    'packages': ['corechart']
                                });
                                google.charts.setOnLoadCallback(drawChart);

                                function drawChart() {
                                    var data = google.visualization.arrayToDataTable([
                                        ['Year', 'Sales', 'Expenses'],
                                        ['2013', 1000, 400],
                                        ['2014', 1170, 460],
                                        ['2015', 660, 1120],
                                        ['2016', 1030, 540]
                                    ]);
                                    var options = {
                                        vAxis: {
                                            minValue: 0
                                        },
                                        colors: ['#1de9b6', '#1dc4e9']
                                    };
                                    var chart = new google.visualization.AreaChart(document.getElementById('chart-google-area'));
                                    chart.draw(data, options);
                                }
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Stacking Area Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-google-stacking" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                google.charts.load('current', {
                                    'packages': ['corechart']
                                });
                                google.charts.setOnLoadCallback(drawChartStacking);

                                function drawChartStacking() {
                                    var data = google.visualization.arrayToDataTable([
                                        ['Year', 'Sales', 'Expenses'],
                                        ['2013', 1000, 400],
                                        ['2014', 1170, 460],
                                        ['2015', 660, 1120],
                                        ['2016', 1030, 540]
                                    ]);
                                    var options_stacked = {
                                        isStacked: true,
                                        height: 300,
                                        legend: {
                                            position: 'top',
                                            maxLines: 3
                                        },
                                        vAxis: {
                                            minValue: 0
                                        },
                                        colors: ['#1de9b6', '#A389D4']
                                    };
                                    var chart = new google.visualization.AreaChart(document.getElementById('chart-google-stacking'));
                                    chart.draw(data, options_stacked);
                                }
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-google-bar" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                google.charts.load('current', {
                                    packages: ['corechart', 'bar']
                                });
                                google.charts.setOnLoadCallback(drawStacked);

                                function drawStacked() {
                                    var data = google.visualization.arrayToDataTable([
                                        ['City', '2010 Population', '2000 Population'],
                                        ['New York City, NY', 8175000, 8008000],
                                        ['Los Angeles, CA', 3792000, 3694000],
                                        ['Chicago, IL', 2695000, 2896000],
                                        ['Houston, TX', 2099000, 1953000],
                                        ['Philadelphia, PA', 1526000, 1517000]
                                    ]);
                                    var options = {
                                        title: 'Population of Largest U.S. Cities',
                                        chartArea: {
                                            width: '50%'
                                        },
                                        isStacked: true,
                                        hAxis: {
                                            title: 'Total Population',
                                            minValue: 0,
                                        },
                                        vAxis: {
                                            title: 'City'
                                        },
                                        colors: ['#A389D4', '#04a9f5']
                                    };
                                    var chart = new google.visualization.BarChart(document.getElementById('chart-google-bar'));
                                    chart.draw(data, options);
                                }
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bubble Chart</h5>
                        </div>
                        <div class="card-block text-center">
                            <div id="chart-google-bubble" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                google.charts.load('current', {
                                    'packages': ['corechart']
                                });
                                google.charts.setOnLoadCallback(drawSeriesChart);

                                function drawSeriesChart() {
                                    var data = google.visualization.arrayToDataTable([
                                        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
                                        ['CAN', 80.66, 1.67, 'North America', 33739900],
                                        ['DEU', 79.84, 1.36, 'Europe', 81902307],
                                        ['DNK', 78.6, 1.84, 'Europe', 5523095],
                                        ['EGY', 72.73, 2.78, 'Middle East', 79716203],
                                        ['GBR', 80.05, 2, 'Europe', 61801570],
                                        ['IRN', 72.49, 1.7, 'Middle East', 73137148],
                                        ['IRQ', 68.09, 4.77, 'Middle East', 31090763],
                                        ['ISR', 81.55, 2.96, 'Middle East', 7485600],
                                        ['RUS', 68.6, 1.54, 'Europe', 141850000],
                                        ['USA', 78.09, 2.05, 'North America', 307007000]
                                    ]);
                                    var options = {
                                        title: 'Correlation between life expectancy, fertility rate ' +
                                            'and population of some world countries (2010)',
                                        hAxis: {
                                            title: 'Life Expectancy'
                                        },
                                        vAxis: {
                                            title: 'Fertility Rate'
                                        },
                                        bubble: {
                                            textStyle: {
                                                fontSize: 11
                                            }
                                        },
                                        colors: ['#1de9b6', '#04a9f5', '#A389D4']
                                    };
                                    var chart = new google.visualization.BubbleChart(document.getElementById('chart-google-bubble'));
                                    chart.draw(data, options);
                                }
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Candlestick Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-google-Candlestick" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                google.charts.load('current', {
                                    'packages': ['corechart']
                                });
                                google.charts.setOnLoadCallback(drawChartCandlestick);

                                function drawChartCandlestick() {
                                    var dataCandlestick = google.visualization.arrayToDataTable([
                                        ['Mon', 20, 28, 38, 45],
                                        ['Tue', 31, 38, 55, 66],
                                        ['Wed', 50, 55, 77, 80],
                                        ['Thu', 77, 77, 66, 50],
                                        ['Fri', 68, 66, 22, 15]

                                    ], true);
                                    var optionsCandlestick = {
                                        legend: 'none',
                                        colors: ['#04a9f5']
                                    };
                                    var chart = new google.visualization.CandlestickChart(document.getElementById('chart-google-Candlestick'));
                                    chart.draw(dataCandlestick, optionsCandlestick);
                                }
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Waterfall Chart</h5>
                        </div>
                        <div class="card-block  text-center">
                            <div id="chart-google-Waterfall" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                google.charts.load('current', {
                                    'packages': ['corechart']
                                });
                                google.charts.setOnLoadCallback(drawChartWaterfall);

                                function drawChartWaterfall() {
                                    var dataWaterfall = google.visualization.arrayToDataTable([
                                        ['Mon', 28, 28, 38, 38],
                                        ['Tue', 38, 38, 55, 55],
                                        ['Wed', 55, 55, 77, 77],
                                        ['Thu', 77, 77, 66, 66],
                                        ['Fri', 66, 66, 22, 22]

                                    ], true);

                                    var optionsWaterfall = {
                                        legend: 'none',
                                        bar: {
                                            groupWidth: '100%'
                                        },
                                        candlestick: {
                                            fallingColor: {
                                                strokeWidth: 0,
                                                fill: '#04a9f5'
                                            },
                                            risingColor: {
                                                strokeWidth: 0,
                                                fill: '#1de9b6'
                                            }
                                        }
                                    };
                                    var chart = new google.visualization.CandlestickChart(document.getElementById('chart-google-Waterfall'));
                                    chart.draw(dataWaterfall, optionsWaterfall);
                                }
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Combo Chart</h5>
                        </div>
                        <div class="card-block text-center">
                            <div id="chart-google-Combo" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                google.charts.load('current', {
                                    'packages': ['corechart']
                                });
                                google.charts.setOnLoadCallback(drawVisualization);

                                function drawVisualization() {
                                    var data = google.visualization.arrayToDataTable([
                                        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
                                        ['2004/05', 165, 938, 522, 998, 450, 614.6],
                                        ['2005/06', 135, 1120, 599, 1268, 288, 682],
                                        ['2006/07', 157, 1167, 587, 807, 397, 623],
                                        ['2007/08', 139, 1110, 615, 968, 215, 609.4],
                                        ['2008/09', 136, 691, 629, 1026, 366, 569.6]
                                    ]);

                                    var options = {
                                        title: 'Monthly Coffee Production by Country',
                                        vAxis: {
                                            title: 'Cups'
                                        },
                                        hAxis: {
                                            title: 'Month'
                                        },
                                        seriesType: 'bars',
                                        series: {
                                            5: {
                                                type: 'line'
                                            }
                                        },
                                        colors: ['#04a9f5', '#1de9b6', '#f44236', '#1dc4e9', '#A389D4', '#3ebfea']
                                    };

                                    var chart = new google.visualization.ComboChart(document.getElementById('chart-google-Combo'));
                                    chart.draw(data, options);
                                }
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Donut Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-google-Donut" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                google.charts.load("current", {
                                    packages: ["corechart"]
                                });
                                google.charts.setOnLoadCallback(drawChartDonut);

                                function drawChartDonut() {
                                    var dataDonut = google.visualization.arrayToDataTable([
                                        ['Task', 'Hours per Day'],
                                        ['Work', 11],
                                        ['Eat', 2],
                                        ['Commute', 2],
                                        ['Watch TV', 2],
                                        ['Sleep', 7]
                                    ]);

                                    var optionsDonut = {
                                        title: 'My Daily Activities',
                                        pieHole: 0.4,
                                        colors: ['#1dc4e9', '#1de9b6', '#3ebfea', '#A389D4', '#899FD4']
                                    };

                                    var chart = new google.visualization.PieChart(document.getElementById('chart-google-Donut'));
                                    chart.draw(dataDonut, optionsDonut);
                                }
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Exploading A Slice Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-google-Exploading" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                google.charts.load("current", {
                                    packages: ["corechart"]
                                });
                                google.charts.setOnLoadCallback(drawChartExploading);

                                function drawChartExploading() {
                                    var dataExploading = google.visualization.arrayToDataTable([
                                        ['Language', 'Speakers (in millions)'],
                                        ['Assamese', 13],
                                        ['Bengali', 83],
                                        ['Bodo', 1.4],
                                        ['Dogri', 2.3],
                                        ['Gujarati', 46],
                                        ['Hindi', 300],
                                        ['Kannada', 38],
                                        ['Kashmiri', 5.5],
                                        ['Konkani', 5],
                                        ['Maithili', 20],
                                        ['Malayalam', 33],
                                        ['Manipuri', 1.5],
                                        ['Marathi', 72],
                                        ['Nepali', 2.9],
                                        ['Oriya', 33]
                                    ]);
                                    var optionsExploading = {
                                        title: 'Language',
                                        legend: 'none',
                                        pieSliceText: 'label',
                                        slices: {
                                            4: {
                                                offset: 0.2
                                            },
                                            12: {
                                                offset: 0.3
                                            },
                                            14: {
                                                offset: 0.4
                                            },
                                            15: {
                                                offset: 0.5
                                            },
                                        },
                                        colors: ['#04a9f5', '#1de9b6', '#1dc4e9', '#FE8A7D', '#A389D4', '#3ebfea']
                                    };

                                    var chart = new google.visualization.PieChart(document.getElementById('chart-google-Exploading'));
                                    chart.draw(dataExploading, optionsExploading);
                                }
                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Slice Visibility Threshold Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-google-Threshold" style="width: 100%; height: 300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {
                                google.charts.load('current', {
                                    'packages': ['corechart']
                                });
                                google.charts.setOnLoadCallback(drawChartThreshold);

                                function drawChartThreshold() {

                                    var dataThreshold = new google.visualization.DataTable();
                                    dataThreshold.addColumn('string', 'Pizza');
                                    dataThreshold.addColumn('number', 'Populartiy');
                                    dataThreshold.addRows([
                                        ['Pepperoni', 33],
                                        ['Hawaiian', 26],
                                        ['Mushroom', 22],
                                        ['Sausage', 10], // Below limit.
                                        ['Anchovies', 9] // Below limit.
                                    ]);

                                    var optionsThreshold = {
                                        title: 'Popularity of Types of Pizza',
                                        sliceVisibilityThreshold: .2,
                                        colors: ['#04a9f5', '#1de9b6', '#A389D4', '#899FD4']
                                    };
                                    var chart = new google.visualization.PieChart(document.getElementById('chart-google-Threshold'));
                                    chart.draw(dataThreshold, optionsThreshold);
                                }
                            }, 700);
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Google chart Js --&gt;
                    &lt;script src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-highchart">High Chart</h2>
            <div class="row">
                <div class="col-xl-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar [ Basic ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-highchart-bar1" style="width: 100%; height: 450px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Highcharts.chart('chart-highchart-bar1', {
                                    chart: {
                                        type: 'column'
                                    },
                                    colors: ['#1de9b6', '#1dc4e9', '#A389D4', '#899FD4'],
                                    title: {
                                        text: 'Monthly Average Rainfall'
                                    },
                                    subtitle: {
                                        text: 'Source: WorldClimate.com'
                                    },
                                    xAxis: {
                                        categories: [
                                            'Jan',
                                            'Feb',
                                            'Mar',
                                            'Apr',
                                            'May',
                                            'Jun',
                                            'Jul',
                                            'Aug',
                                            'Sep',
                                            'Oct',
                                            'Nov',
                                            'Dec'
                                        ],
                                        crosshair: true
                                    },
                                    yAxis: {
                                        min: 0,
                                        title: {
                                            text: 'Rainfall (mm)'
                                        }
                                    },
                                    tooltip: {
                                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                                        footerFormat: '</table>',
                                        shared: true,
                                        useHTML: true
                                    },
                                    plotOptions: {
                                        column: {
                                            pointPadding: 0.2,
                                            borderWidth: 0
                                        }
                                    },
                                    series: [{
                                        name: 'Tokyo',
                                        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

                                    }, {
                                        name: 'New York',
                                        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

                                    }, {
                                        name: 'London',
                                        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

                                    }, {
                                        name: 'Berlin',
                                        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

                                    }]
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line [ Basic ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-highchart-line1" style="width: 100%; height: 350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Highcharts.chart('chart-highchart-line1', {
                                    chart: {
                                        type: 'spline',
                                    },
                                    colors: ['#1de9b6', '#1dc4e9', '#A389D4'],
                                    title: {
                                        text: 'Solar Employment Growth by Sector, 2010-2017'
                                    },
                                    subtitle: {
                                        text: 'Source: thesolarfoundation.com'
                                    },
                                    yAxis: {
                                        title: {
                                            text: 'Number of Employees'
                                        }
                                    },
                                    plotOptions: {
                                        series: {
                                            label: {
                                                connectorAllowed: false
                                            },
                                            pointStart: 2010
                                        }
                                    },
                                    series: [{
                                        name: 'Installation',
                                        data: [5, 25, 15, 35, 25, 35, 45, 75]
                                    }, {
                                        name: 'Manufacturing',
                                        data: [25, 35, 45, 75, 5, 25, 15, 35, ]
                                    }, {
                                        name: 'Sales & Distribution',
                                        data: [45, 75, 25, 5, 15, 55, 5, 25]
                                    }],
                                    responsive: {
                                        rules: [{
                                            condition: {
                                                maxWidth: 500
                                            },
                                            chartOptions: {
                                                legend: {
                                                    layout: 'horizontal',
                                                    align: 'center',
                                                    verticalAlign: 'bottom'
                                                }
                                            }
                                        }]
                                    }
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Area [ Zoom ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-highchart-area2" style="width: 100%; height: 350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                $.getJSON(
                                    'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
                                    function(data) {
                                        Highcharts.chart('chart-highchart-area2', {
                                            chart: {
                                                zoomType: 'x',
                                            },
                                            title: {
                                                text: 'USD to EUR exchange rate over time'
                                            },
                                            subtitle: {
                                                text: document.ontouchstart === undefined ?
                                                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                                            },
                                            xAxis: {
                                                type: 'datetime'
                                            },
                                            yAxis: {
                                                title: {
                                                    text: 'Exchange rate'
                                                }
                                            },
                                            legend: {
                                                enabled: true
                                            },
                                            plotOptions: {
                                                area: {
                                                    fillColor: {
                                                        linearGradient: {
                                                            x1: 0,
                                                            y1: 0,
                                                            x2: 0,
                                                            y2: 1
                                                        },
                                                        stops: [
                                                            [0, '#1dc4e9'],
                                                            [1, '#1de9b6']
                                                        ]
                                                    },
                                                    marker: {
                                                        radius: 2
                                                    },
                                                    lineWidth: 2,
                                                    lineColor: '#1dc4e9',
                                                    states: {
                                                        hover: {
                                                            lineWidth: 1
                                                        }
                                                    },
                                                    threshold: null
                                                }
                                            },
                                            series: [{
                                                type: 'area',
                                                name: 'USD to EUR',
                                                data: data
                                            }]
                                        });
                                    }
                                );

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pie [ Basic ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-highchart-pie1" style="width: 100%; height: 350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Highcharts.chart('chart-highchart-pie1', {
                                    chart: {
                                        plotBackgroundColor: null,
                                        plotBorderWidth: null,
                                        plotShadow: false,
                                        type: 'pie'
                                    },
                                    colors: ['#1de9b6', '#1dc4e9', '#A389D4', '#899FD4', '#f44236', '#f4c22b'],
                                    title: {
                                        text: 'Browser market shares in January, 2018'
                                    },
                                    tooltip: {
                                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                                    },
                                    plotOptions: {
                                        pie: {
                                            allowPointSelect: true,
                                            cursor: 'pointer',
                                            dataLabels: {
                                                enabled: false
                                            },
                                            showInLegend: true
                                        }
                                    },
                                    series: [{
                                        name: 'Brands',
                                        colorByPoint: true,
                                        data: [{
                                            name: 'Chrome',
                                            y: 61.41,
                                            sliced: true,
                                            selected: true
                                        }, {
                                            name: 'Internet Explorer',
                                            y: 11.84
                                        }, {
                                            name: 'Firefox',
                                            y: 10.85
                                        }, {
                                            name: 'Edge',
                                            y: 4.67
                                        }, {
                                            name: 'Safari',
                                            y: 4.18
                                        }, {
                                            name: 'Other',
                                            y: 7.05
                                        }]
                                    }]
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pie [ Donut ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-highchart-pie2" style="width: 100%; height: 350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Highcharts.chart('chart-highchart-pie2', {
                                    chart: {
                                        plotBackgroundColor: null,
                                        plotBorderWidth: null,
                                        plotShadow: false,
                                        type: 'pie'
                                    },
                                    colors: ['#1de9b6', '#1dc4e9', '#A389D4', '#899FD4', '#f44236', '#f4c22b'],
                                    title: {
                                        text: 'Browser market shares in January, 2018'
                                    },
                                    tooltip: {
                                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                                    },
                                    plotOptions: {
                                        pie: {
                                            allowPointSelect: true,
                                            cursor: 'pointer',
                                            dataLabels: {
                                                enabled: false
                                            },
                                            showInLegend: true
                                        }
                                    },
                                    series: [{
                                        name: 'Brands',
                                        colorByPoint: true,
                                        size: '90%',
                                        innerSize: '60%',
                                        data: [{
                                            name: 'Chrome',
                                            y: 61.41,
                                            sliced: true,
                                            selected: true
                                        }, {
                                            name: 'Internet Explorer',
                                            y: 11.84
                                        }, {
                                            name: 'Firefox',
                                            y: 10.85
                                        }, {
                                            name: 'Edge',
                                            y: 4.67
                                        }, {
                                            name: 'Safari',
                                            y: 4.18
                                        }, {
                                            name: 'Other',
                                            y: 7.05
                                        }]
                                    }]
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pie [ 3D ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-highchart-pie-3d1" style="width: 100%; height: 350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Highcharts.chart('chart-highchart-pie-3d1', {
                                    chart: {
                                        type: 'pie',
                                        options3d: {
                                            enabled: true,
                                            alpha: 45
                                        }
                                    },
                                    colors: ['#1de9b6', '#1dc4e9', '#A389D4', '#899FD4', '#f44236', '#f4c22b'],
                                    title: {
                                        text: 'Contents of Highsoft weekly fruit delivery'
                                    },
                                    subtitle: {
                                        text: '3D donut in Highcharts'
                                    },
                                    plotOptions: {
                                        pie: {
                                            depth: 45
                                        }
                                    },
                                    series: [{
                                        name: 'Delivered amount',
                                        data: [
                                            ['Bananas', 8],
                                            ['Kiwi', 3],
                                            ['Mixed nuts', 2],
                                            ['Oranges', 6],
                                            ['Apples', 3],
                                            ['Pears', 4],
                                        ]
                                    }]
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Pie [ Donut 3D ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-highchart-pie-3d2" style="width: 100%; height: 350px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Highcharts.chart('chart-highchart-pie-3d2', {
                                    chart: {
                                        type: 'pie',
                                        options3d: {
                                            enabled: true,
                                            alpha: 45
                                        }
                                    },
                                    colors: ['#1de9b6', '#1dc4e9', '#A389D4', '#899FD4', '#f44236', '#f4c22b'],
                                    title: {
                                        text: 'Contents of Highsoft weekly fruit delivery'
                                    },
                                    subtitle: {
                                        text: '3D donut in Highcharts'
                                    },
                                    plotOptions: {
                                        pie: {
                                            innerSize: 100,
                                            depth: 45
                                        }
                                    },
                                    series: [{
                                        name: 'Delivered amount',
                                        data: [
                                            ['Bananas', 8],
                                            ['Kiwi', 3],
                                            ['MIxed nuts', 2],
                                            ['Oranges', 6],
                                            ['Apples', 3],
                                            ['Pears', 4],
                                        ]
                                    }]
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Combinations [ Column, Line & Pie ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="chart-highchart-combo1" style="width: 100%; height: 450px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Highcharts.chart('chart-highchart-combo1', {
                                    title: {
                                        text: 'Combination chart'
                                    },
                                    xAxis: {
                                        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Kiwi'],
                                    },
                                    colors: ['#1de9b6', '#1dc4e9', '#A389D4'],
                                    labels: {
                                        items: [{
                                            html: 'Total fruit consumption',
                                            style: {
                                                left: '50px',
                                                top: '18px',
                                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                                            }
                                        }]
                                    },
                                    series: [{
                                        type: 'column',
                                        name: 'Jane',
                                        data: [3, 2, 1, 3, 4]
                                    }, {
                                        type: 'column',
                                        name: 'John',
                                        data: [2, 3, 5, 7, 6]
                                    }, {
                                        type: 'column',
                                        name: 'Joe',
                                        data: [4, 3, 3, 9, 0]
                                    }, {
                                        type: 'spline',
                                        name: 'Average',
                                        data: [3, 2.67, 3, 6.33, 3.33],
                                        color: '#f44236',
                                        lineColor: '#f44236',
                                        marker: {
                                            lineWidth: 2,
                                            lineColor: '#f44236',
                                            fillColor: '#fff'
                                        }
                                    }, {
                                        type: 'pie',
                                        name: 'Total consumption',
                                        data: [{
                                            name: 'Jane',
                                            y: 13,
                                            color: '#1de9b6'
                                        }, {
                                            name: 'John',
                                            y: 23,
                                            color: '#1dc4e9',
                                        }, {
                                            name: 'Joe',
                                            y: 19,
                                            color: '#A389D4',
                                        }],
                                        center: [100, 80],
                                        size: 100,
                                        showInLegend: false,
                                        dataLabels: {
                                            enabled: false
                                        }
                                    }]
                                });

                            }, 700);
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- High chart Js --&gt;
                    &lt;script src="assets/plugins/chart-highchart/js/highcharts.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/chart-highchart/js/highcharts-3d.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-knob">Knob Chart</h2>
            <div class="row">
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Tron Skin</h5>
                        </div>
                        <div class="card-block  text-center">
                            <input type="text" class="dial" value="24" data-width="200" data-height="200" data-fgColor="#1de9b6" data-skin="tron" data-thickness=".1" data-angleOffset="180">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Angle Offset and Arc</h5>
                        </div>
                        <div class="card-block  text-center">
                            <input type="text" class="dial" value="35" data-width="200" data-height="200" data-fgColor="#A389D4" data-angleOffset="-125" data-angleArc="250" data-rotation="anticlockwise">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Cursor Mode</h5>
                        </div>
                        <div class="card-block  text-center">
                            <input type="text" class="dial" value="70" data-width="200" data-height="200" data-cursor="true" data-thickness=".1" data-fgColor="#f44236">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Disable Display Input</h5>
                        </div>
                        <div class="card-block  text-center">
                            <input type="text" class="dial" value="50" data-width="200" data-height="200" data-linecap="round" data-displayInput="false" data-fgColor="#04a9f5">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Display Previous Value</h5>
                        </div>
                        <div class="card-block text-center">
                            <input type="text" class="dial" value="32" data-width="200" data-height="200" data-linecap="round" data-displayprevious="true" data-displayInput="true" data-fgColor="#1dc4e9">
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Read Only and Size</h5>
                        </div>
                        <div class="card-block text-center">
                            <input type="text" class="dial" value="48" data-width="100" data-height="200" data-linecap="round" data-displayprevious="true" data-displayInput="true" data-readonly="true" data-fgColor="#1de9b6">
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Knob chart Js --&gt;
                    &lt;script src="assets/plugins/chart-knob/js/jquery.knob.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/chart-knob/js/jquery.knob-custom.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-morris">Morris Chart</h2>
            <div class="row">
                <div class="col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar [ Simple ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="morris-bar-chart" style="height:300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Morris.Bar({
                                    element: 'morris-bar-chart',
                                    data: [{
                                        y: '2008',
                                        a: 50,
                                        b: 40,
                                        c: 35,
                                    }, {
                                        y: '2009',
                                        a: 75,
                                        b: 65,
                                        c: 60,
                                    }, {
                                        y: '2010',
                                        a: 50,
                                        b: 40,
                                        c: 55,
                                    }, {
                                        y: '2011',
                                        a: 75,
                                        b: 65,
                                        c: 85,
                                    }, {
                                        y: '2012',
                                        a: 100,
                                        b: 90,
                                        c: 40,
                                    }],
                                    xkey: 'y',
                                    barSizeRatio: 0.70,
                                    barGap: 3,
                                    resize: true,
                                    responsive: true,
                                    ykeys: ['a', 'b', 'c'],
                                    labels: ['Bar 1', 'Bar 2', 'Bar 3'],
                                    barColors: ["0-#1de9b6-#1dc4e9", "0-#899FD4-#A389D4", "#04a9f5"]
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar [ Stacked ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="morris-bar-stacked-chart" style="height:300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Morris.Bar({
                                    element: 'morris-bar-stacked-chart',
                                    data: [{
                                        y: '2008',
                                        a: 50,
                                        b: 40,
                                        c: 35,
                                    }, {
                                        y: '2009',
                                        a: 75,
                                        b: 65,
                                        c: 60,
                                    }, {
                                        y: '2010',
                                        a: 50,
                                        b: 40,
                                        c: 55,
                                    }, {
                                        y: '2011',
                                        a: 75,
                                        b: 65,
                                        c: 85,
                                    }, {
                                        y: '2012',
                                        a: 100,
                                        b: 90,
                                        c: 40,
                                    }],
                                    xkey: 'y',
                                    stacked: true,
                                    barSizeRatio: 0.50,
                                    barGap: 3,
                                    resize: true,
                                    responsive: true,
                                    ykeys: ['a', 'b', 'c'],
                                    labels: ['Bar 1', 'Bar 2', 'Bar 3'],
                                    barColors: ["0-#1de9b6-#1dc4e9", "0-#899FD4-#A389D4", "#04a9f5"]
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line [ Angle ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="morris-area-chart" style="height:300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Morris.Area({
                                    element: 'morris-area-chart',
                                    data: [{
                                        y: '2006',
                                        a: 0,
                                        b: 0
                                    }, {
                                        y: '2007',
                                        a: 130,
                                        b: 100
                                    }, {
                                        y: '2008',
                                        a: 80,
                                        b: 60
                                    }, {
                                        y: '2009',
                                        a: 70,
                                        b: 200
                                    }, {
                                        y: '2010',
                                        a: 220,
                                        b: 150
                                    }, {
                                        y: '2011',
                                        a: 105,
                                        b: 90
                                    }, {
                                        y: '2012',
                                        a: 250,
                                        b: 150
                                    }],
                                    xkey: 'y',
                                    ykeys: ['a', 'b'],
                                    labels: ['Series A', 'Series B'],
                                    pointSize: 0,
                                    fillOpacity: 0.8,
                                    pointStrokeColors: ['#b4becb', '#A389D4'],
                                    behaveLikeLine: true,
                                    gridLineColor: '#e0e0e0',
                                    lineWidth: 0,
                                    smooth: false,
                                    hideHover: 'auto',
                                    responsive: true,
                                    lineColors: ['#b4becb', '#A389D4'],
                                    resize: true
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Area [ Smooth ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="morris-area-curved-chart" style="height:300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Morris.Area({
                                    element: 'morris-area-curved-chart',
                                    data: [{
                                        period: '2010',
                                        iphone: 0,
                                        ipad: 0,
                                        itouch: 0
                                    }, {
                                        period: '2011',
                                        iphone: 50,
                                        ipad: 15,
                                        itouch: 5
                                    }, {
                                        period: '2012',
                                        iphone: 20,
                                        ipad: 50,
                                        itouch: 65
                                    }, {
                                        period: '2013',
                                        iphone: 60,
                                        ipad: 12,
                                        itouch: 7
                                    }, {
                                        period: '2014',
                                        iphone: 30,
                                        ipad: 20,
                                        itouch: 120
                                    }, {
                                        period: '2015',
                                        iphone: 25,
                                        ipad: 80,
                                        itouch: 40
                                    }, {
                                        period: '2016',
                                        iphone: 10,
                                        ipad: 10,
                                        itouch: 10
                                    }],
                                    lineColors: ['#A389D4', '#1de9b6', '#04a9f5'],
                                    xkey: 'period',
                                    ykeys: ['iphone', 'ipad', 'itouch'],
                                    labels: ['Site A', 'Site B', 'Site C'],
                                    pointSize: 0,
                                    lineWidth: 0,
                                    resize: true,
                                    fillOpacity: 0.9,
                                    responsive: true,
                                    behaveLikeLine: true,
                                    gridLineColor: '#d2d2d2',
                                    hideHover: 'auto'
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line [ Angle ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="morris-line-chart" class="ChartShadow" style="height:300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Morris.Line({
                                    element: 'morris-line-chart',
                                    data: [{
                                        y: '2006',
                                        a: 20,
                                        b: 10
                                    }, {
                                        y: '2007',
                                        a: 55,
                                        b: 45
                                    }, {
                                        y: '2008',
                                        a: 45,
                                        b: 35
                                    }, {
                                        y: '2009',
                                        a: 75,
                                        b: 65
                                    }, {
                                        y: '2010',
                                        a: 50,
                                        b: 40
                                    }, {
                                        y: '2011',
                                        a: 75,
                                        b: 65
                                    }, {
                                        y: '2012',
                                        a: 100,
                                        b: 90
                                    }],
                                    xkey: 'y',
                                    redraw: true,
                                    resize: true,
                                    smooth: false,
                                    ykeys: ['a', 'b'],
                                    hideHover: 'auto',
                                    responsive: true,
                                    labels: ['Series A', 'Series B'],
                                    lineColors: ['#1de9b6', '#04a9f5']
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line [ Smooth ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="morris-line-smooth-chart" class="ChartShadow" style="height:300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                Morris.Line({
                                    element: 'morris-line-smooth-chart',
                                    data: [{
                                        y: '2006',
                                        a: 100,
                                        b: 90
                                    }, {
                                        y: '2007',
                                        a: 75,
                                        b: 65
                                    }, {
                                        y: '2008',
                                        a: 50,
                                        b: 40
                                    }, {
                                        y: '2009',
                                        a: 75,
                                        b: 65
                                    }, {
                                        y: '2010',
                                        a: 50,
                                        b: 40
                                    }, {
                                        y: '2011',
                                        a: 75,
                                        b: 65
                                    }, {
                                        y: '2012',
                                        a: 100,
                                        b: 90
                                    }],
                                    xkey: 'y',
                                    redraw: true,
                                    resize: true,
                                    ykeys: ['a', 'b'],
                                    hideHover: 'auto',
                                    responsive: true,
                                    labels: ['Series A', 'Series B'],
                                    lineColors: ['#1de9b6', '#A389D4']
                                });

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line [ Real Time ] Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="morris-line-realtime-chart" class="ChartShadow" style="height:300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                var nReloads = 0;

                                function data(offset) {
                                    var ret = [];
                                    for (var x = 0; x <= 360; x += 10) {
                                        var v = (offset + x) % 360;
                                        ret.push({
                                            x: x,
                                            y: Math.cos(Math.PI * v / 90).toFixed(4),
                                            z: Math.cos(Math.PI * v / 180).toFixed(4),
                                            a: Math.sin(Math.PI * v / 90).toFixed(4)
                                        });
                                    }
                                    return ret;
                                }
                                var graph_real = Morris.Line({
                                    element: 'morris-line-realtime-chart',
                                    data: data(0),
                                    resize: true,
                                    xkey: 'x',
                                    ykeys: ['y', 'z', 'a'],
                                    labels: ['line 1', 'line 2', 'line 3'],
                                    parseTime: false,
                                    ymin: -1.0,
                                    ymax: 1.0,
                                    lineColors: ['#A389D4', '#1de9b6', '#04a9f5'],
                                    pointSize: 4,
                                    responsive: true,
                                    pointFillColors: ['#fff', '#fff', '#fff'],
                                    pointStrokeColors: ['#A389D4', '#1de9b6', '#04a9f5'],
                                    lineWidth: 2,
                                    hideHover: true
                                });

                                function update() {
                                    nReloads++;
                                    graph_real.setData(data(5 * nReloads));
                                }
                                setInterval(update, 100);

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-xl-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Donut Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="morris-donut-chart" style="height:300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                var graph = Morris.Donut({
                                    element: 'morris-donut-chart',
                                    data: [{
                                        value: 60,
                                        label: 'Data 1'
                                    }, {
                                        value: 20,
                                        label: 'Data 1'
                                    }, {
                                        value: 10,
                                        label: 'Data 1'
                                    }, {
                                        value: 5,
                                        label: 'Data 1'
                                    }],
                                    colors: [
                                        '#1de9b6',
                                        '#A389D4',
                                        '#04a9f5',
                                        '#1dc4e9',
                                    ],
                                    resize: true,
                                    formatter: function(x) {
                                        return "val : " + x
                                    }
                                });

                            }, 700);
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Morris chart css --&gt;
                    &lt;link href="assets/plugins/chart-morris/css/morris.css" rel="stylesheet"&gt;<br>
                    &lt;!-- Morris chart Js --&gt;
                    &lt;script src="assets/plugins/chart-morris/js/raphael.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/chart-morris/js/morris.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-nvd3">NVD3 Chart</h2>
            <div class="row">
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="nvd3-line-1" class="nvd-chart" style="height: 300px">
                                <svg></svg>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                nv.addGraph(function() {
                                    var chart = nv.models.lineChart()
                                        .showLegend(true);
                                    chart.xAxis
                                        .axisLabel('Time (ms)')
                                        .tickFormat(d3.format(',r'));

                                    chart.yAxis
                                        .axisLabel('Voltage (v)')
                                        .tickFormat(d3.format('.02f'));

                                    var myData = sinAndCos();

                                    d3.select('#nvd3-line-1 svg')
                                        .datum(myData)
                                        .call(chart);

                                    //Update the chart when window resizes.
                                    nv.utils.windowResize(function() {
                                        chart.update()
                                    });
                                    return chart;
                                });

                                function sinAndCos() {
                                    var sin = [],
                                        sin2 = [],
                                        cos = [];
                                    for (var i = 0; i < 100; i++) {
                                        sin.push({
                                            x: i,
                                            y: Math.sin(i / 10)
                                        });
                                        sin2.push({
                                            x: i,
                                            y: Math.sin(i / 10) * 0.25 + 0.5
                                        });
                                        cos.push({
                                            x: i,
                                            y: .5 * Math.cos(i / 10)
                                        });
                                    }
                                    return [{
                                        values: sin,
                                        key: 'Sine Wave',
                                        color: '#A389D4'
                                    }, {
                                        values: cos,
                                        key: 'Cosine Wave',
                                        color: '#04a9f5'
                                    }, {
                                        values: sin2,
                                        key: 'Another sine wave',
                                        color: '#1de9b6',
                                        area: true
                                    }];
                                }

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Discrete Bar Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="nvd3-bar-1" class="nvd-chart" style="height: 300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                nv.addGraph(function() {
                                    var chart = nv.models.discreteBarChart()
                                        .x(function(d) {
                                            return d.label
                                        })
                                        .y(function(d) {
                                            return d.value
                                        })
                                        .staggerLabels(true)
                                        .showValues(true)
                                    d3.select('#nvd3-bar-1').append('svg')
                                        .datum(barData())
                                        .call(chart);

                                    nv.utils.windowResize(chart.update);

                                    return chart;
                                });
                                //Each bar represents a single discrete quantity.
                                function barData() {
                                    return [{
                                        key: "Cumulative Return",
                                        values: [{
                                            "label": "A",
                                            "value": -29.765957771107,
                                            "color": "#3ebfea"
                                        }, {
                                            "label": "B",
                                            "value": 10,
                                            "color": "#04a9f5"
                                        }, {
                                            "label": "C",
                                            "value": 32.807804682612,
                                            "color": "#ff8a65"
                                        }, {
                                            "label": "D",
                                            "value": 196.45946739256,
                                            "color": "#1de9b6"
                                        }, {
                                            "label": "E",
                                            "value": 0.25434030906893,
                                            "color": "#4C5667"
                                        }, {
                                            "label": "F",
                                            "value": -98.079782601442,
                                            "color": "#69CEC6"
                                        }, {
                                            "label": "G",
                                            "value": -13.925743130903,
                                            "color": "#a389d4"
                                        }, {
                                            "label": "H",
                                            "value": -5.1387322875705,
                                            "color": "#FE8A7D"
                                        }]
                                    }]
                                }

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Stacked/Grouped Multi-Bar Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="nvd3-multi-bar-1" class="nvd-chart" style="height: 300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                nv.addGraph(function() {
                                    var chart = nv.models.multiBarChart()
                                        .reduceXTicks(true)
                                        .rotateLabels(0)
                                        .showControls(true)
                                        .groupSpacing(0.1)
                                        .color(['#04a9f5', '#A389D4', '#1de9b6']);

                                    chart.xAxis
                                        .tickFormat(d3.format(',f'));

                                    chart.yAxis
                                        .tickFormat(d3.format(',.1f'));

                                    d3.select('#nvd3-multi-bar-1').append('svg')
                                        .datum(stackedData())
                                        .call(chart);

                                    nv.utils.windowResize(chart.update);

                                    return chart;
                                });
                                //Generate some nice data.
                                function stackedData() {
                                    return stream_layers(3, 10 + Math.random() * 100, .1).map(function(data, i) {
                                        return {
                                            key: 'Stream #' + i,
                                            values: data
                                        };
                                    });
                                }

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Regular Pie Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="nvd3-pie-1" class="nvd-chart" style="height:300px;"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                nv.addGraph(function() {
                                    var chart = nv.models.pieChart()
                                        .x(function(d) {
                                            return d.label
                                        })
                                        .y(function(d) {
                                            return d.value
                                        })
                                        .showLabels(true);

                                    d3.select("#nvd3-pie-1").append('svg')
                                        .datum(pieData())
                                        .datum(pieData())
                                        .transition().duration(350)
                                        .call(chart);
                                    nv.utils.windowResize(chart.update);

                                    return chart;
                                });

                                function pieData() {
                                    return [{
                                        "label": "One",
                                        "value": 29.765957771107,
                                        "color": "#ff8a65"
                                    }, {
                                        "label": "Two",
                                        "value": 0,
                                        "color": "#f4c22b"
                                    }, {
                                        "label": "Three",
                                        "value": 32.807804682612,
                                        "color": "#04a9f5"
                                    }, {
                                        "label": "Four",
                                        "value": 196.45946739256,
                                        "color": "#3ebfea"
                                    }, {
                                        "label": "Five",
                                        "value": 0.19434030906893,
                                        "color": "#4F5467"
                                    }, {
                                        "label": "Six",
                                        "value": 98.079782601442,
                                        "color": "#1de9b6"
                                    }, {
                                        "label": "Seven",
                                        "value": 13.925743130903,
                                        "color": "#a389d4"
                                    }, {
                                        "label": "Eight",
                                        "value": 5.1387322875705,
                                        "color": "#FE8A7D"
                                    }];
                                }

                            }, 700);
                        });
                    </script>
                </div>
                <div class="col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Donut Chart</h5>
                        </div>
                        <div class="card-block">
                            <div id="nvd3-donut-1" class="nvd-chart" style="height: 300px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            setTimeout(function() {

                                nv.addGraph(function() {
                                    var chart = nv.models.pieChart()
                                        .x(function(d) {
                                            return d.label
                                        })
                                        .y(function(d) {
                                            return d.value
                                        })
                                        .showLabels(true)
                                        .labelThreshold(.05)
                                        .labelType("percent")
                                        .donut(true)
                                        .donutRatio(0.35);
                                    d3.select("#nvd3-donut-1").append('svg')
                                        .datum(donutData())
                                        .transition().duration(350)
                                        .call(chart);
                                    nv.utils.windowResize(chart.update);
                                    return chart;
                                });

                                function donutData() {
                                    return [{
                                        "label": "One",
                                        "value": 29.765957771107,
                                        "color": "#ff8a65"
                                    }, {
                                        "label": "Two",
                                        "value": 0,
                                        "color": "#f4c22b"
                                    }, {
                                        "label": "Three",
                                        "value": 32.807804682612,
                                        "color": "#04a9f5"
                                    }, {
                                        "label": "Four",
                                        "value": 196.45946739256,
                                        "color": "#3ebfea"
                                    }, {
                                        "label": "Five",
                                        "value": 0.19434030906893,
                                        "color": "#4F5467"
                                    }, {
                                        "label": "Six",
                                        "value": 98.079782601442,
                                        "color": "#1de9b6"
                                    }, {
                                        "label": "Seven",
                                        "value": 13.925743130903,
                                        "color": "#a389d4"
                                    }, {
                                        "label": "Eight",
                                        "value": 5.1387322875705,
                                        "color": "#FE8A7D"
                                    }];
                                }

                            }, 700);
                        });
                    </script>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- NVD3 chart css --&gt;
                    &lt;link href="assets/plugins/chart-nvd3/css/nv.d3.min.css" rel="stylesheet"&gt;<br>
                    &lt;!-- NVD3 chart Js --&gt;
                    &lt;script src="assets/plugins/chart-nvd3/js/d3.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/pluassets/plugins/chart-nvd3/js/nv.d3.min.js"&gt;&lt;/script&gt;
                    &lt;script src="assets/plugins/chart-nvd3/js/stream_layers.js"&gt;&lt;/script&gt;
                </code>
            </pre>
            <h2 class="docs-header" id="page-peity">Peity Chart</h2>
            <div class="row">
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Updating Chart</h5>
                        </div>
                        <div class="card-block">
                            <span class="updating-chart peity-chart">5,3,6,4,2,10,2,3,9,1,2,8</span>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var updatingChart = $(".updating-chart").peity("line", {
                                fill: "rgba(240, 70, 107, 0.4)",
                                stroke: "rgb(240, 70, 107)"
                            });
                            setInterval(function() {
                                var random = Math.round(Math.random() * 10)
                                var values = updatingChart.text().split(",")
                                values.shift()
                                values.push(random)
                                updatingChart
                                    .text(values.join(","))
                                    .change()
                            }, 1000);
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Updating Chart</h5>
                        </div>
                        <div class="card-block">
                            <span class="updating-chart1 peity-chart">5,3,9,6,5,9,7,3,5,2</span>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var updatingChart1 = $(".updating-chart1").peity("line", {
                                fill: "rgba(51, 219, 158, 0.32)",
                                stroke: "rgba(51, 219, 158, 0.90)"
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line Chart 1</h5>
                        </div>
                        <div class="card-block">
                            <span class="updating-chart2 peity-chart">5,3,2,-1,-3,-2,2,3,5,2</span>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var updatingChart2 = $(".updating-chart2").peity("line", {
                                fill: "rgba(79, 195, 247, 0.45)",
                                stroke: "rgba(79, 195, 247, 0.91)"
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Line Chart 2</h5>
                        </div>
                        <div class="card-block">
                            <span class="updating-chart3 peity-chart">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            var updatingChart3 = $(".updating-chart3").peity("line", {
                                fill: "rgba(255, 138, 101, 0.39)",
                                stroke: "rgba(255, 138, 101, 0.94)"
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar Chart 1</h5>
                        </div>
                        <div class="card-block">
                            <span class="bar-colours-1 peity-chart">0,3,6,4,7,3,5,2,2</span>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $(".bar-colours-1").peity("bar", {
                                fill: ["rgba(79, 195, 247, 0.65)", "rgba(51, 219, 158, 0.65)"]
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Bar Chart 2</h5>
                        </div>
                        <div class="card-block">
                            <span class="bar-colours-2 peity-chart">0,-3,-6,-4,5,-4,-5,-2,2</span>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $(".bar-colours-2").peity("bar", {
                                fill: ["rgba(79, 195, 247, 0.65)", "rgba(240, 70, 107, 0.65)"]
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Custom Chart 1</h5>
                        </div>
                        <div class="card-block">
                            <div class="data-attributes">
                                <span data-peity='{ "fill": ["#4fc3f7", "#eeeeee"],"innerRadius": 10, "radius": 40 }'>1/7</span>
                                <span data-peity='{ "fill": ["#f0466b", "#eeeeee"],"innerRadius": 14, "radius": 36 }'>2/7</span>
                                <span data-peity='{ "fill": ["#33db9e", "#eeeeee"],"innerRadius": 16, "radius": 32 }'>3/7</span>
                                <span data-peity='{ "fill": ["#ff8a65", "#eeeeee"],"innerRadius": 18, "radius": 28 }'>4/7</span>
                                <span data-peity='{ "fill": ["#69CEC6", "#eeeeee"],"innerRadius": 20, "radius": 24 }'>5/7</span>
                                <span data-peity='{ "fill": ["#FE8A7D", "#eeeeee"],"innerRadius": 18, "radius": 20 }'>6/7</span>
                                <span data-peity='{ "fill": ["#536dfe", "#eeeeee"],"innerRadius": 15, "radius": 16 }'>7/7</span>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $(".data-attributes span").peity("donut");
                            /*Pie Charts*/
                            $("span.pie_1").peity("pie", {
                                fill: ["#f0466b", "#4fc3f7"]
                            });
                            $("span.pie_2").peity("pie", {
                                fill: ["#ff8a65", "#33db9e"]
                            });
                            $("span.pie_3").peity("pie", {
                                fill: ["#4fc3f7", "#536dfe"]
                            });
                            $("span.pie_4").peity("pie", {
                                fill: ["#33db9e", "#f0466b"]
                            });
                            $("span.pie_5").peity("pie", {
                                fill: ["#ff8a65", "#4fc3f7"]
                            });
                            $("span.pie_6").peity("pie", {
                                fill: ["#f0466b", "#536dfe"]
                            });
                            $("span.pie_7").peity("pie", {
                                fill: ["#33db9e", "#ff8a65"]
                            });
                        });
                    </script>
                </div>
                <div class="col-xl-4 col-md-6 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Custom Chart 2</h5>
                        </div>
                        <div class="card-block">
                            <span class="pie_1">1/5</span>
                            <span class="pie_2">226/360</span>
                            <span class="pie_3">0.52/1.561</span>
                            <span class="pie_4">1,4</span>
                            <span class="pie_5">226,134</span>
                            <span class="pie_6">0.52,1.041</span>
                            <span class="pie_7">1,2,3,2,2</span>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $("span.pie_1").peity("pie", {
                                fill: ["#f0466b", "#4fc3f7"]
                            });
                            $("span.pie_2").peity("pie", {
                                fill: ["#ff8a65", "#33db9e"]
                            });
                            $("span.pie_3").peity("pie", {
                                fill: ["#4fc3f7", "#536dfe"]
                            });
                            $("span.pie_4").peity("pie", {
                                fill: ["#33db9e", "#f0466b"]
                            });
                            $("span.pie_5").peity("pie", {
                                fill: ["#ff8a65", "#4fc3f7"]
                            });
                            $("span.pie_6").peity("pie", {
                                fill: ["#f0466b", "#536dfe"]
                            });
                            $("span.pie_7").peity("pie", {
                                fill: ["#33db9e", "#ff8a65"]
                            });
                        });
                    </script>
                </div>
            </div>
            <h2 class="docs-header" id="page-radial">Radial Chart</h2>
            <div class="row">
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Variant of Colors</h5>
                        </div>
                        <div class="card-block">
                            <div data-label="20%" class="radial-bar radial-bar-20 radial-bar-lg radial-bar-primary"></div>
                            <div data-label="30%" class="radial-bar radial-bar-30 radial-bar-lg radial-bar-success"></div>
                            <div data-label="40%" class="radial-bar radial-bar-40 radial-bar-lg radial-bar-info"></div>
                            <div data-label="50%" class="radial-bar radial-bar-50 radial-bar-lg radial-bar-danger"></div>
                            <div data-label="60%" class="radial-bar radial-bar-60 radial-bar-lg radial-bar-warning"></div>
                            <div data-label="10%" class="radial-bar radial-bar-10 radial-bar-lg"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Different Size</h5>
                        </div>
                        <div class="card-block">
                            <div data-label="50%" class="radial-bar radial-bar-50 radial-bar-lg"></div>
                            <div data-label="40%" class="radial-bar radial-bar-40 radial-bar-sm"></div>
                            <div data-label="30%" class="radial-bar radial-bar-30 radial-bar-xs"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 datta-example">
                    <div class="card">
                        <div class="card-header">
                            <h5>Radial With Images</h5>
                        </div>
                        <div class="card-block">
                            <div data-label="50%" class="radial-bar radial-bar-50 radial-bar-lg radial-bar-danger">
                                <img src="assets/images/user/avatar-2.jpg" alt="User-Image">
                            </div>
                            <div data-label="40%" class="radial-bar radial-bar-40 radial-bar-sm radial-bar-warning">
                                <img src="assets/images/user/avatar-2.jpg" alt="User-Image">
                            </div>
                            <div data-label="30%" class="radial-bar radial-bar-30 radial-bar-xs radial-bar-success">
                                <img src="assets/images/user/avatar-2.jpg" alt="User-Image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code class="language-markup">
                    &lt;!-- Peity chart Js --&gt;
                    &lt;script src="assets/pluginsassets/plugins/chart-peity/js/jquery.peity.min.js"&gt;&lt;/script&gt;
                </code>
            </pre>
        </div>
    </div>


    <div class="datta-example-modal">
        <a href="javascript:void(0)" class="md-datta-example-modal-copy">
            <span class="feather icon-clipboard"></span>
        </a>
        <a href="javascript:void(0)" class="datta-example-modal-close">&times;</a>
        <div class="scroll-div">
            <div class="datta-example-modal-content"></div>
        </div>
    </div>

    <script src="assets/js/pcoded.min.js"></script>
    <script src="assets/js/uikit.min.js"></script>

    <script>
        $(function() {
            $('body').scrollspy({
                target: ".docs-sections-inner"
            });
            $(document).on('scroll', function() {
                var top = $(document).scrollTop();
                var left = $(document).scrollLeft();
                $('.docs-sections')[0].style.top = (top > 70 ? 0 : 70 - top) + 'px';
                $('.docs-sections')[0].style.left = (left * -1) + 'px';
            });
            $(document).ready(function() {
                var top = $(document).scrollTop();
                var left = $(document).scrollLeft();
                $('.docs-sections')[0].style.top = (top > 70 ? 0 : 70 - top) + 'px';
                $('.docs-sections')[0].style.left = (left * -1) + 'px';
            });

            $(".docs-sections-inner a").on('click', function(event) {
                if (this.hash !== "") {
                    event.preventDefault();
                    var hash = this.hash;
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top
                    }, 1500, function() {
                        window.location.hash = hash;
                    });
                }
            });

        });
    </script>

</body>
</html>
